CSS အကြယ်

ရေးသားခြင်း အကျယ်အဝန်း ပုံစံ အကြီးအသီး အထူးအောင်ပွားခြင်း နှင့် အပြောက်အချွန် (ဥပမာ အရောင်းသုံးအရေးကြီးသော အကြောင်းအရာ) ကို သတ်မှတ်သည်。

CSS အကျယ်ပြန်

在 CSS 中，有两种不同类型的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
  • 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

如果需要了解更多有关字体系列的知识，请阅读 CSS အကျယ်ပြန်。

指定字体系列

使用 font-family 属性 定义文本的字体系列。

使用通用字体系列

如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：

body {font-family: sans-serif;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

这样用户代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。

指定字体系列

除了使用通用的字体系列，您还可以通过 font-family 属性设置更具体的字体。

အောက်ပါ အစုံအစုံ အမှတ်ပေးထားသော အရာအစုံ ကို အမှတ်ပေးထားသော h1 အရာအစုံ အတွက် Georgia ကျွန်းစိမ်း ကို ချီးမြှင့်နိုင်ပါသည်

h1 {font-family: Georgia;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

ထို့ကြောင့် အခြားအရာတွင် ၊ အသုံးပြုသူများ အတွက် အမှတ်ပေးထားသော Georgia ကျွန်းစိမ်း မရှိဘဲ အချိန်ချိန် အသုံးပြုသူများ အတွက် အသုံးပြုသူများ အတွက် အမှတ်ပေးထားသော ကျွန်းစိမ်း အသုံးပြုနိုင်ပါသည်

ဤအရာကို ပြုလုပ်ရန် ၊ အမှတ်ပေးထားသော ကျွန်းစိမ်းအမည် နှင့် အမှတ်ပေးထားသော ကျွန်းစိမ်းအုတ်ကြိတ် တစ်ခု ကို ကူးစက်နိုင်ပါသည်

h1 {font-family: Georgia, serif;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

တစ်ခါ တို့သည် Georgia ကျွန်းစိမ်း ကို တင်သွင်းလို့ မရှိဘဲ သော်လည်း Times ကျွန်းစိမ်း ကို တင်သွင်းလို့ ရှိသည် သော် (serif ကျွန်းစိမ်းအုတ်ကြိတ် များ တစ်ခု) အသုံးပြုသူများ အတွက် အသုံးပြုသူများ အတွက် h1 အရာအစုံ ကို Times ကျွန်းစိမ်း ကို အသုံးပြုနိုင်ပါသည် ။ သို့သော် Times ကျွန်းစိမ်း နှင့် Georgia ကျွန်းစိမ်း တို့ အချိန်ချိန် အစားအပြား အမျိုးအစား မရှိဘဲ သော်လည်း သို့မဟုတ် တခုခု အဆင့်အတိုင်း အနှစ်နှစ် လွန်ချင်း တူကြသည်

ထို့ကြောင့် ၊ ကျွန်တော်တို့ အားလုံး ပြင်းထန်သော font-family အခြေခံအုတ်ကြိတ်များ တွင် အသုံးပြုကြသော အမှတ်ပေးထားသော ကျွန်းစိမ်းအုတ်ကြိတ် တစ်ခု ကို ချီးမြှင့်ကြသည် ။ ထို့ကြောင့် အသုံးပြုသူများ အတွက် လက်ဆုံးသဘော တစ်ခု ကို ဖြစ်ပေါ်စေရန် အချိန်ချိန် ကျွန်းစိမ်း မရှိသေးဘဲ အချိန်ချိန် ပြင်းထန်သော ကျွန်းစိမ်း များ ကို တစ်ခု ချီးမြှင့်နိုင်သည်

ဤစကားလုံးအား ကိုယ်တိုင် ကျွန်းစိမ်းရရှိသော်လည်း ၊ အမှတ်ပေးထားသော အရာအစုံ အတွက် အနည်းငယ်နှင့် ဆင်တူသော ကျွန်းစိမ်းများ တစ်စုံတစ်ယောက် ကို ချီးမြှင့်နိုင်သည် ။ ဤအရာကို ပြုလုပ်ရန် ၊ ကျွန်းစိမ်းများ အဆင့်အတိုင်း တည်ဆောက်ပြီး ကွက်စည်းကာ ချီးမြှင့်သည်

p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。

使用引号

您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：

...

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

字体风格

font-style 属性最常用于规定斜体文本。

该属性有三个值：

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示

အမှတ်အသား

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体变形

font-variant 属性可以设定小型大写字母。

小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

အမှတ်အသား

p {font-variant:small-caps;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

字体加粗

font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

အမှတ်အသား

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

字体大小

font-size အခြေခံ အကူအညီစာလုံး အရွယ် ကို ကြိုးပမ်းခြင်း

အင်တာနက် ကုမ္ပဏီ တွင် စာလုံး အရွယ် အစားပြုခြင်း အခြေခံ အကူအညီ အသုံးပြုခြင်း အခြေခံ အကူအညီ အသုံးပြုခြင်း အခြေခံ အကူအညီ အသုံးပြုခြင်း

အခြေခံ အင်တာနက် ကုမ္ပဏီ တွင် အခြေခံ အသုံးပြုခြင်း အခြေခံ အကူအညီ အသုံးပြုခြင်း

font-size အဆင့် အမှတ် အမျိုးမျိုး ဖြင့် အသုံးပြုခြင်း

အခြေခံ အရွယ်:

  • စာလုံး အရွယ် ကို အသုံးပြုခြင်း အခြေခံ အကူအညီ အသုံးပြုခြင်း
  • အသုံးပြုခြင်း အင်တာနက် ကုမ္ပဏီ တွင် စာလုံး အရွယ် ကို ပြောင်းလဲခြင်း မရှိ သော အခြေခံ အကူအညီ အသုံးပြုခြင်း
  • အခြေခံ အရွယ် ကို ပြောင်းလဲခြင်း အခြေခံ အကူအညီ အသုံးပြုခဲ့သည်။

အတူတူ အရွယ်:

  • အခြား အရာများ နှင့် နှိုင်းယှဉ်၍ အရွယ် ကို ကြိုးပမ်းခြင်း
  • အသုံးပြုခြင်း အင်တာနက် ကုမ္ပဏီ တွင် စာလုံး အရွယ် ကို ပြောင်းလဲခြင်း ခွင့်ပြုခြင်း

သတိပြုချက်:အသုံးပြုခြင်း မရှိ သော စာလုံး အရွယ် ကို အခြေခံ အရွယ် ဖြစ်သည်။ အကြောင်းကြောင်း အရွယ် အခြေခံ အရွယ် ဖြစ်သည်။

စာလုံး အရွယ် ကို ပမာဏ ဖွဲ့စည်းခြင်း

စာလုံး အရွယ် ကို ပမာဏ ဖွဲ့စည်းခြင်း ဖြင့် စာလုံး အရွယ် ကို အပြည့်အဝင် ကွပ်ကဲခြင်း အခြေခံ အကူအညီ အသုံးပြုခဲ့သည်။

အမှတ်အသား

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

ဖူးစီးရီး ချိန်း အင်တာနက် ကုမ္ပဏီ တွင် အထူး သတ်မှတ်ထားသော အကြောင်းကြောင်း အရွယ် ကို ပြောင်းလဲခြင်း အခြေခံ အကူအညီ အသုံးပြုခဲ့သည်။ သို့သော် အင်တာနက် ကုမ္ပဏီ တွင် အကြောင်းကြောင်း အရွယ် ကို ပြောင်းလဲခြင်း မရှိပေ။

ဗီယက်နီဂိုင်တာ အင်တာနက် ကုမ္ပဏီ တွင် စာလုံး အရွယ် ကို ပြောင်းလဲခြင်း အခြေခံ အကူအညီ အသုံးပြုခဲ့သည်။ သို့သော် အကျဉ်းချုပ် အင်တာနက် ကုမ္ပဏီ အရွယ် ကို ပြောင်းလဲခြင်း ဖြစ်သည်။

စာလုံး အရွယ် ကို em ဖွဲ့စည်းခြင်း

ဗီယက်နီဂိုင်တာ အင်တာနက် ကုမ္ပဏီ တွင် စာလုံး အစားပြုခြင်း မရှိ ကြောင်း ကျွန်ုပ် မူ အသုံးပြုခဲ့သည်။

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

အမှတ်အသား

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

သို့သော် အိပ်ခ် တွင် အကျဉ်းချက်မှာ ရှိပါသည်။ အချက်အလက် ကို ပြန်လည်အသုံးပြုခြင်း အခါ အကြိမ်ဖြူး အကိုးအကား အတိုင်း အတာ အသေးစိတ်မှာ အကြိမ်ဖြူး အကိုးအကား ကောင်းမွန်သော အတိုင်း အတာ ဖြစ်နိုင်သည်

တို့ဖြင့် စုပေါင်းအသုံးပြုပုံ

ဘရပ်စ်ဆာ အားလုံး တွင် အရေးယူနိုင်သော အမှတ်အသား ကို အချက်အလက်တစ်ခု အဖြစ် ဘုတ်အသုံးစွဲခြင်း ကို ပြသည်

အမှတ်အသား

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

ကျွန်ုပ်တို့၏ စစ်ဆေးကြည့်ပါ

ကျွန်ုပ်တို့၏ ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ။ အားလုံး ဘရပ်စ်ဆာ တွင် အတိုင်းအတာအတိုင်း အကြိမ်ဖြူး အကိုးအကား ကို ပြသခြင်း နှင့် ဘရပ်စ်ဆာ အားလုံး အကြိမ်ဖြူး အကိုးအကား အတိုင်း အတာ လွှတ်ခြင်း

CSS အကြိမ်ဖြူး အကိုးအကား အမှတ်အသား

အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ ဖော်ပြသည်
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ ဖော်ပြသည်
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ ဖော်ပြသည်
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ ဖော်ပြသည်
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ
အကြိမ်ဖြူး အကိုးအကား ကို အသုံးပြုပုံ ဖော်ပြသည်
အကြိမ်ဖြူး အကိုးအကား အား အချက်အလက် တစ်ခုတွင် ပါဝင်သည်
အမှတ်အသား အကျယ်အဝန်း အကိုးအကား ကို အချက်အလက် တစ်ခုတွင် အသုံးပြုပုံ ကို ဖော်ပြသည်။

CSS အကြိမ်ဖြူး အကိုးအကား

အကိုးအကား ဖော်ပြ
font အကျယ်အဝန်း အကိုးအကားများ။ အရာသီးသန့်ခြင်း ကို အချက်အလက် တစ်ခုတွင် အသုံးပြုရသည်။
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。