CSS属性学习:(九)字体-Font

fontfont-stylefont-variantfont-weightfont-sizefont-family

font


类型: Font

默认值: 看独立属性自身

取值: [ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar

适用于: 所有元素

取值

<color>:指定颜色。
<' font-style '>:指定文本字体样式
<' font-variant '>:指定文本是否为小型的大写字母
<' font-weight '>:指定文本字体的粗细
<' font-size '>:指定文本字体尺寸
<' line-height '>:指定文本字体的行高
<' font-family '>:指定文本使用某个字体或字体序列
caption:使用有标题的系统控件的文本字体(如按钮,菜单等)(CSS2)
icon:使用图标标签的字体(CSS2)
menu:使用菜单的字体(CSS2)
message-box:使用信息对话框的文本字体(CSS2)
small-caption:使用小控件的字体(CSS2)
status-bar:使用窗口状态栏的字体(CSS2)

demo

See the Pen bwWpYa by yrq110 (@yrq110) on CodePen.


font-style


类型: Font

默认值: normal

取值: normal | italic | oblique

适用于: 所有元素

取值

normal:指定文本字体样式为正常的字体
italic:指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
oblique:指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字

demo

See the Pen RGVaBp by yrq110 (@yrq110) on CodePen.


font-variant


类型: Font

默认值: normal

取值: normal | small-caps

适用于: 所有元素

取值

normal:正常的字体
small-caps:小型的大写字母字体

##demo

See the Pen BLRKqY by yrq110 (@yrq110) on CodePen.


font-weight


类型: Font

默认值: normal

取值: normal | bold | bolder | lighter | <integer>

适用于: 所有元素

取值

normal:正常的字体。相当于数字值400
bold:粗体。相当于数字值700。
bolder:定义比继承值更重的值
lighter:定义比继承值更轻的值
<integer>:用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

demo

See the Pen QKvEbY by yrq110 (@yrq110) on CodePen.


font-size


类型: Font

默认值: medium

取值: <absolute-size> | <relative-size> | <length> | <percentage>

  • <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size> = smaller | larger

适用于: 所有元素

取值

<absolute-size>:根据对象字号进行调节。以 medium 作为基础参照,xx-small相当于medium 3/5 (h6),x-small: 3/4,small: 8/9 (h5),medium: 1 (h4),large: 6/5 (h3),x-large: 3/2 (h2),xx-large: 2/1 (h1),
<relative-size>:相对于父对像中字号进行相对调节。使用成比例的em单位计算。
<length>:用长度值指定文字大小。不允许负值。
<percentage>:用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

##demo

See the Pen qamNbR by yrq110 (@yrq110) on CodePen.


font-family


类型: Font

默认值: 由user agent决定

取值: [ <family-name> | <generic-family> ] #

<family-name> = arial | georgia | verdana | helvetica | simsun and etc.
<generic-family> = cursive | fantasy | monospace | serif | sans-serif

适用于: 所有元素

取值

<family-name>:字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文,则应使用引号括起
<generic-family>:字体序列名称。

demo

See the Pen EgmyWg by yrq110 (@yrq110) on CodePen.


示例代码来自Joy Du

文章目录
  1. 1. font
    1. 1.1. 取值
    2. 1.2. demo
  2. 2. font-style
    1. 2.1. 取值
    2. 2.2. demo
  3. 3. font-variant
    1. 3.1. 取值
  4. 4. font-weight
    1. 4.1. 取值
    2. 4.2. demo
  5. 5. font-size
    1. 5.1. 取值
  6. 6. font-family
    1. 6.1. 取值
    2. 6.2. demo
|