CSS知识点梳理(5)-字体

技术总结 评论

字体系列（Font Families）

5 种通用字体系列

  1. Serif fonts：字体成比例（即，所有的字符由于大小不同而具有不同的宽度）且有衬线（即，字符笔画末端的描边修饰）。Times,Gergia,New Century Schoolbook.
  2. Sans-serif fonts: 字体成比例但没有衬线。Helvetica,Geneva,``Arial,Univers`.
  3. Monospace fonts: 字体不成比例，等宽。通常用于显示编程代码和表格数据。Courier,Courier New,Consolas.
  4. Cursive fonts: 模拟人手写或书写。通常有流动的曲线组成，具有超过衬线的描边修饰。Zapf Chancery,Comic Sans.
  5. Fantasy fonts： 不属于以上 4 类的字体。

使用通用字体系列

如果想使用sans-serif无衬线字体，但并不在乎具体哪一个，可以这样声明：

1
2
3
4
5
6
7
8
9
10
11
12
body {
    font-family: sans-serif;
}
h1, h2, h3 {
    font-family: serif;
}
code, pre, tt, kbd {
    font-family: monospace;
}
p.signature {
    font-family: cursive;
}

指定字体系列

1
2
3
h1 {
    font-family: Georgia, serif;
}

使用Georgia字体（如果可用），如果不可用，则使用serif通用字体。

1
2
3
p {
    font-family: Times, 'Times New Roman','New Century Schoolbook', serif;
}

浏览器将按字体的列出的顺序查找字体，如果列出的字体不可用，则使用serif通用字体。

如果指定的字体名称包含空格或者#,$等符号，或者名称同通用字体相同时，需要使用引号包裹。

使用@font-face

@font-face允许我们自定义特定的字体。

1
2
3
4
5
6
7
8
9
10
11
@font-face {
  font-family: "jiangjiang";
  src: local("jiangjiang"), /* 在本地安装的字体寻找 */ url("jiangjiang.eot"), /*浏览器支持EOT文件，IE6-IE9 兼容模式下 */
      url("jiangjiang.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("jiangjiang.woff") format("woff"), /* wpff文件，大部分现在浏览器都支持，桌面用户 */
      url("jiangjiang.ttf") format("turetype"),
    /* 大部分IOS和安卓设备 */ url("jiangjiang.svg#jiangjiang") format("svg"); /* 老旧的IOS设备 */
}
p {
  font-family: jiangjiang, Helvetica, sans-serif;
}

以上示例：自定义字体名称jiangjiang,先在本地安装的字体寻找.如果没有，则使用url()按顺序尝试下载远端的字体。定义好之后就可以使用该字体了。format()告诉浏览器所使用的字体类型，跳过不支持的格式文件的下载，从而降低带宽提高加载速度。src()中的 URL 是有同源策略限制，不能跨域下载字体文件。解决方法:1.将字体文件拷贝到自己的服务器 2.使用同时提供样式表和字体文件的字体托管服务。

识别的字体格式值(format())

Value Format
opentype OTF(OpenType)
embedded-opentype ETO(Embedded OpenType)
svg SVG(Scalable Vetor Graphics)
truetype TTF(TrueType Format)
woff WOFF(Web Open Font Format)

font-weight

1
2
3
4
5
Values:        normal|bold|bolder|lighter|100-900
Initial value: normal
Applies to: All elements
Inherited:  Yes
Animatable: No

常见的字重数值大致对应的自重描述词，有些字体可能有差别

font-weight Description
100 Thin
200 Extra Light(Ultra Light)
300 Light
400 Regular(Normal)
500 Medium
600 Semi Bold(Demi Bold)
700 Bold
800 Extra Bold(Ultra Bold)
900 Black(Heavy)

通常字体至少必备 400(normal)和 700(bold)这两个字重值。如果出现指定的字重值在字体中找不到直接对应的字重，则按一些规则：

  • 指定字重小于 400,首先降序查找小于指定字重的各个字重，之后升序查找大于指定字重的各个字重，直到找到匹配的字重。
  • 指定字重大于 500，首先升序查找大于指定字重的各个字重，之后降序查找小于指定字重的各个字重，直到找到匹配的字重。
  • 指定字重等于 400，先匹配 500 对应的字重，若没有，则执行第一条小于 400 的规则。
  • 指定字重等于 500，先匹配 400 对应的字重，若没有，则执行第一条小于 400 的规则。

假设某字体库内字重分 3 阶(400,700,900)

字体库内直接匹配的字重 通过规则计算间接匹配的字重
400 300,200,100,500
700 600
900 800

举例font-weight:300，字体库没有直接匹配的字重，且小于 400，根据第一条规则，先降序查找匹配，都没有，在升序查找到 400，则可以匹配。

lighter,bolder,与从父元素继承而来的font-weight值进行比较。

font-size

绝对大小

keyword CSS1 CSS2 CSS3
xx-small 5px 9px 10px
x-small 7px 11px 12px
small 11px 13px 14px
medium 16px 16px 16px
large 24px 19px 19px
x-large 36px 23px 24px
xx-large 54px 28px 32px

相对大小

larger,smaller，相对于父元素，使用相同的比例因子（通常 1.2）来计算绝对大小，并在绝对大小范围内向上或向下移动

百分比

根据从父元素继承的大小来计算

继承

font-size继承的是计算值，不是百分比。字体的相对大小、百分比在继承时是累加的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .one {
        font-size: 20px;
      }
      .two {
        font-size: larger;
      }
      .three {
        font-size: 200%;
      }
      .four {
        font-size: 25%;
      }
    </style>
  </head>
  <body>
    <div class="one">
      1
      <div class="two">
        2
        <div class="three">
          3
          <div class="four">4</div>
        </div>
      </div>
    </div>
  </body>
</html>
  • one： 20px;
  • two: 20px 的在 CSS3 中绝对大小的更大一级 是x-larger，24px
  • three: 24px * 200% = 48px
  • four: 48px * 25% = 12px

font-style

1
2
3
4
Values:         italic | oblique | normal
Initial value:  normal
Inherited:  Yes
Animatable: No

font-stretch

1
2
3
4
5
6
Values:     normal | ultra-condensed | extra-condensed | condensed
            | semicondensed  | semi-expanded | expanded
            | extra-expanded | ultraexpanded
Initial value: normal
Inherited:    Yes
Animatable:   No

只要在使用的字体系列定义了更宽或更窄的字体时，这个属性才会其作用，但大多数情况下并不是。

font variant

字体变体，对应的 CSS 属性font-variation-*,包括链接（ligatures）,大写（caps）,数字（numerals）,替代字形（alternate glyphs）。使用@supports特性查询来判断浏览器是否支持。使用font-feature-settings来兼容低版本。

  • font-variant-ligatures:字母的连接样式，防止难看的字母碰撞
    • common-ligatures， 激活连接
    • no-common-ligatures，禁用连接
  • font-variant-positon: 实现 sub 和 sup 效果。
    • sub, 下标
    • supper,上标
  • font-variant-caps: 控制字母大写
    • small-caps, 替换小写字母为小的大写字母，原来的大写字母不变。
    • all-small-caps，将所有字母都变成小的大写字母。
  • font-variant-numeric: 对数字类型的处理。
    • lining-nums，默认值。数字近似大写字母，高度一致。用于标题或表格中的数字。
    • oldstyle-nums,更类似于小写字母,有不同的高度和对其方式
    • tabular-nums,在数据表格中使用，以允许数字垂直对齐
    • proportional-nums,数字具有可变的间距，并于水平文本融合。
    • diagonal-fractions,分数以小数的形式显示
    • ordinal，像1st,2nd,3rd,4th一样，以序号显示，标准的小写字母
    • slashed-zero,用带斜线的 0，来替换 0 字符

爱学兮Front End & Vue & TypeScript

前端狗，偶尔思考，间歇式码字