Web编程技术营地
研究、演示、创新

CSS Fonts

撰写时间：2024-04-15

修订时间：2024-04-15

字体属性名称列表

  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size
  • font-size-adjust
  • font
  • font-synthesis

font-family

font-family用于指定字体家族的名称，也即平时所说有的哪种字体。

p { font-family: Helvetica, Verdana; }

A sample paragraph.

指定了Helvetica及Verdana两种字体家族，多个字体家族名称之间用逗号,隔开。浏览器将从左到右优先选用最先遇到且可用的字体。

除了指定特定的字体名称，还可在特定字体名称后面指定通用字体家族（generic-family）。指定通用字体家族的意义在于，如果前面所指定的字体不可用，则使用总是存在的通用字体家族。

p { font-family: Helvetica, Verdana, serif, sans-serif; font-size: 1.5em; }

A sample paragraph.

后面的两个serif及sans-serif即为通用字体家族的名称。通用字体家族只有以下几种：

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

它们在网页中渲染效果如下（字体大小设定为1.5em）：

serif

sans-serif

cursive

fantasy

monospace

通用字体家族名称不能使用引号来引用。而普通字体家族名称可以使用引号来引用，尤其是一些字体名称本身就有空格，如New Century Schoolbook，等，就必须使用引号来引用。

可使用getComputedStyle方法来查看具体使用的字体：

p { font-family: Helvetica, Verdana, serif, sans-serif; font-size: 1.5em; }

A sample paragraph.
let p = document.querySelector('p'); let propValue = getComputedStyle(p).getPropertyValue('font-family'); console.log(propValue);

可以使用中文字体名称：

p {font-size: 1.5em;} #p1 {font-family: 黑体, SimHei;} #p2 {font-family: 楷体, KaiTi;} #p3 {font-family: 宋体, SimSun;} #p4 {font-family: 仿宋, FangSong;}

这是黑体字体。

这是楷体字体。

这是宋体字体。

这是仿宋字体。

font-weight

font-weight属性指定字体粗细。

p {font-family: Verdana; font-size: calc(100vw / 20);} #p1 {font-weight: 100} #p2 {font-weight: 200} #p3 {font-weight: 300} #p4 {font-weight: 400} #p5 {font-weight: 500} #p6 {font-weight: 600} #p7 {font-weight: 700} #p8 {font-weight: 800} #p9 {font-weight: 900}

100: This is English. 这是中文。

200: This is English. 这是中文。

300: This is English. 这是中文。

400: This is English. 这是中文。

500: This is English. 这是中文。

600: This is English. 这是中文。

700: This is English. 这是中文。

800: This is English. 这是中文。

900: This is English. 这是中文。

使用标识符。

p {font-family: Verdana; font-size: calc(100vw / 20);} #p1 {font-weight: normal} #p2 {font-weight: bold} #p3 {font-weight: bolder} #p4 {font-weight: lighter}

normal: This is English. 这是中文。

bold: This is English. 这是中文。

bolder: This is English. 这是中文。

lighter: This is English. 这是中文。

font-strech

p {font-family: Verdana; font-size: calc(100vw / 24);} #p1 {font-stretch: normal;} #p2 {font-stretch: ultra-condensed;} #p3 {font-stretch: extra-condensed;} #p4 {font-stretch: condensed;} #p5 {font-stretch: semi-condensed;} #p6 {font-stretch: semi-expanded;} #p7 {font-stretch: expanded;} #p8 {font-stretch: extra-expanded;} #p9 {font-stretch: ultra-expanded;}

normal: This is English. 这是中文。

ultra-condensed: This is English. 这是中文。

extra-condensed: This is English. 这是中文。

condensed: This is English. 这是中文。

semi-condensed: This is English. 这是中文。

semi-exanded: This is English. 这是中文。

expanded: This is English. 这是中文。

extra-expanded: This is English. 这是中文。

ultra-expanded: This is English. 这是中文。

font-size

<absolute-size> | <relative-size> | <length-percentage>
<absolute-size>
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative-size>
[ larger | smaller ]
<length-percentage>
CSS-VALUES

font-style

p {font-family: Verdana; font-size: calc(100vw / 20);} #p1 {font-style: normal} #p2 {font-style: italic;} #p3 {font-style: oblique;}

normal: This is English. 这是中文。

italic: This is English. 这是中文。

oblique: This is English. 这是中文。

font

[ [ <font-style> || <font-variant-css21> || <font-weight> || <font-stretch> ]? <font-size>[/<line-height>]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar
<font-variant-css21>
[normal | small-caps]

例子：

p { font: 12pt/14pt sans-serif } p { font: 80% sans-serif } p { font: x-large/110% "new century schoolbook", serif } p { font: bold italic large Palatino, serif } p { font: normal small-caps 120%/120% fantasy } p { font: condensed oblique 12pt "Helvetica Neue", serif; }

对于120%/120%，第一个是相对于父元素font-size的百分比，第二个是相对于元素自己的font-size的百分比（用于设定行高）。

参考资源

  1. CSS Fonts Module Level 3
  2. CSS Values and Units Module Level 3
  3. Google Fonts