CSS Google Fonts
Google Fonts
HTML တွင် စံဖောင့်များကို အသုံးမပြုလိုပါက၊ Google Fonts ကို အသုံးပြုနိုင်ပါသည်။
Google Fonts သည် အခမဲ့အသုံးပြုနိုင်ပြီး ရွေးချယ်ရန် ဖောင့် 1000 ကျော်ရှိသည်။
Google Fonts အသုံးပြုပုံ
<head> ကဏ္ဍတွင် အထူးစတိုင်စာရွက်လင့်ခ်တစ်ခုကို ထည့်ပြီးနောက် CSS ရှိ ဖောင့်ကို ကိုးကားပါ။
ဥပမာ
ဤတွင်၊ Google Fonts မှ "Sofia" အမည်ရှိ ဖောင့်ကို အသုံးပြုလိုသည်-
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
ရလဒ်:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
ဥပမာ
ဤတွင်၊ Google Fonts မှ "Trirong" အမည်ရှိ ဖောင့်ကို အသုံးပြုလိုသည်-
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
ရလဒ်:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
ဥပမာ
ဤတွင်၊ Google Fonts မှ "Audiowide" အမည်ရှိ ဖောင့်ကို အသုံးပြုလိုသည်-
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
ရလဒ်:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
မှတ်ချက်- CSS တွင် ဖောင့်တစ်ခုကို သတ်မှတ်သည့်အခါ၊ အနည်းဆုံး နောက်ပြန်ဖောင့်တစ်ခုကို အမြဲတမ်း စာရင်းပြုစုပါ (မထင်မှတ်ထားသော အပြုအမူများကို ရှောင်ရှားရန်)။ ထို့ကြောင့် ဤနေရာတွင်လည်း စာရင်း၏အဆုံးတွင် ယေဘူယျဖောင့်မိသားစု (serif သို့မဟုတ် sans-serif ကဲ့သို့) ထည့်သင့်သည်။
ရရှိနိုင်သော Google Fonts များစာရင်းအတွက်၊ ကျွန်ုပ်တို့၏ How To - Google Fonts Tutorial သို့ ဝင်ရောက်ကြည့်ရှုပါ ။
Google Fonts အများအပြားကို အသုံးပြုပါ။
Google ဖောင့်များစွာကို အသုံးပြုရန်အတွက် ဖောင့်အမည်များကို ပိုက်အက္ခရာ ( |) ဖြင့် ဤကဲ့သို့ ခွဲခြားလိုက်ရုံဖြင့်-
ဥပမာ
ဖောင့်များစွာကို တောင်းဆိုပါ-
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
ရလဒ်:
Audiowide Font
Sofia Font
Trirong Font
မှတ်ချက်- ဖောင့်အများအပြားတောင်းဆိုခြင်းသည် သင့်ဝဘ်စာမျက်နှာများကို နှေးကွေးစေနိုင်သည်။ ဒါကြောင့် အဲဒါကို သတိထားပါ။
Google Fonts ပုံစံဖန်တီးခြင်း။
Google Fonts များကို CSS ဖြင့် သင်နှစ်သက်သလို ပုံစံသွင်းနိုင်ပါသည်။
ဥပမာ
"ဆိုဖီယာ" ဖောင့်ကို ပုံစံထုတ်ပါ-
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
ရလဒ်:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Font Effects ကိုဖွင့်ခြင်း။
Google သည် သင်အသုံးပြုနိုင်သည့် မတူညီသောဖောင့်အကျိုးသက်ရောက်မှုများကိုလည်း ဖွင့်ပေးထားသည်။
ပထမဦးစွာ Google API သို့ထည့်ပါ၊ ထို့နောက် အထူးအကျိုးသက်ရောက်မှုကို အသုံးပြုမည့်ဒြပ်စင်သို့ အထူးအတန်းအမည်တစ်ခုထည့်ပါ။ အတန်းအမည်သည် အမြဲတမ်းဖြင့် စတင်ပြီး
နှင့်အဆုံးသတ်သည် ။effect=effectnamefont-effect-effectname
ဥပမာ
"ဆိုဖီယာ" ဖောင့်သို့ မီးအကျိုးသက်ရောက်မှုကို ထည့်ပါ-
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
ရလဒ်:
Sofia on Fire
ဖောင့်သက်ရောက်မှုများစွာကို တောင်းဆိုရန်၊ ဤကဲ့သို့သော ပိုက်အက္ခရာ ( ) ဖြင့် အကျိုးသက်ရောက်မှုအမည်များကို ခွဲရုံပါ |-
ဥပမာ
"ဆိုဖီယာ" ဖောင့်သို့ သက်ရောက်မှုများစွာကို ထည့်ပါ-
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
ရလဒ်:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect