字体加载 技巧

DIN-Bold 苹果有 安卓没有

如果只用外部字体 加载时间中 该字体空白 体验不好

安卓：

在页面中加入 preload

1
<link rel="preload" href="//192.168.0.170:8080/style/common/fonts/DIN-Bold.woff" as="font" type="font/woff" crossorigin>

苹果：

不支持preload 但是苹果本来就有这个字体 如果定义外部字体为同样的名字的话 会覆盖本地字体。 所以给外部字体一个另外的名字，font-family 先写本地字体名字 再写外部字体。完美

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@font-face {
  font-family: 'DIN-Bold-web';
  src: url('../common/fonts/DIN-Bold.woff') format('woff'); /* chrome, firefox */
}

@font-face {
  font-family: 'DIN-Medium-web';
  src: url('../common/fonts/DIN-Medium.woff') format('woff'); /* chrome, firefox */
}

.DIN-Bold {
  font-family: 'DIN-Bold', 'DIN-Bold-web';
}

.DIN-Medium {
  font-family: 'DIN-Medium','DIN-Medium-web';
}