『粗上加粗』字体问题定位

本文通过一个问题定位，介绍了使用 @font-face 自定义字体的匹配规则。

背景：

在使用蓝湖自动生成的样式后，出现粗上加粗的问题

1
2
3
4
5

.style_from_lanhu {
  font-size: 40px;
  font-family: DINPro-Bold, DINPro;
  font-weight: bold;
}

，即 DINPro-Bold 叠加 font-weight: bold; 出现更粗的问题。

现象：

1. macOS 端 Chrome 下，样式不会加粗，样式正常；
2. macOS 端 Safari 下，粗上加粗，样式异常;
3. iPhone 端 Safari&Chrome下，粗上加粗，样式异常;

原因：

在我们自定义字体的写法是:

1
2
3
4
5
6

@font-face {
font-family: "DINPro-Bold";
font-style: normal;
font-weight: normal;
src: url("/lib/DINPro-Bold.woff") format("woff");
}

上述写法的含义为: 当 font-family 为 DINPro-Bold，并且 font-style 为 normal，并且 font-weight 为 normal 时，命中 DINPro-Bold.woff 字体。

Safari 很严格地遵守了上述字体命中的规则，当 Safari 看到 .style_from_lanhu 样式时，Safari 的处理为：

1. font-family: DINPro-Bold 直接命中 DINPro-Bold.woff 字体，（DINPro-Bold 后面跟着的 DINPro 被忽略 ）
2. 接 着 font-weight: bold; 再加粗一次，此为粗上加粗的原因。

修改方式：

将 @font-face 中的 font-weight: normal; 修改为 font-weight: bold; ，修改后 font-family: DINPro-Bold 叠加 font-weight: bold; 两个条件一起，才会命中字体。

至于 macOS 端 Chrome 为什么没严格遵循字体命中规则，原因暂未知。

更进一步：

为什么 sketch 生成的样式代码如此简洁，蓝湖却要多此一举多生成几行呢？

对比下区别

1
2
3
4
5
6
7
8
9

.style_from_sketch {
    font-family: DINPro-Bold;
    font-size: 40px;
}
.style_from_lanhu {
font-size: 40px;
font-family: DINPro-Bold, DINPro;
font-weight: bold;
}

个人推测是蓝湖为了兼容 @font-face 的另一种写法，也是更主流的一种写法，即 family:DINPro && weight:bold 命中 DINPro-Bold.woff 字体。

1
2
3
4
5
6

@font-face {
  font-family: "DINPro";
  font-style: normal;
  font-weight: bold;
  src: url("/fonts/DINPro-Bold.woff") format("woff");
}

另一方面，自定义字体在未下载下来的时候，有一个默认的 bold 效果，整体样式不会太突兀。

参考：

https://justineo.github.io/slideshows/font/#/3/1

https://www.mulingyuer.com/archives/126/

https://fonts.google.com/knowledge/using_type/using_web_fonts

https://www.zachleat.com/web/css-tricks-web-fonts/

https://css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them/#loading-fonts-with-self-hosted-fonts

https://www.zachleat.com/web/comprehensive-webfonts/#font-display

https://transfonter.org/

https://drafts.csswg.org/css-fonts-3/#font-face-rule

https://drafts.csswg.org/css-fonts-3/#font-matching-algorithm

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

本文转自 https://lvdawei.com/post/font-face-bugfix/
本站仅做收录，版权归原作者所有。