本文通过一个问题定位,介绍了使用 @font-face
自定义字体的匹配规则。
背景:
在使用蓝湖自动生成的样式后,出现粗上加粗的问题
1 |
.style_from_lanhu { |
,即 DINPro-Bold
叠加 font-weight: bold;
出现更粗的问题。
现象:
- macOS 端 Chrome 下,样式不会加粗,样式正常;
- macOS 端 Safari 下,粗上加粗,样式异常;
- iPhone 端 Safari&Chrome下,粗上加粗,样式异常;
原因:
在我们自定义字体的写法是:
1 |
@font-face { |
上述写法的含义为: 当 font-family
为 DINPro-Bold,并且 font-style
为 normal,并且 font-weight
为 normal 时,命中 DINPro-Bold.woff
字体。
Safari 很严格地遵守了上述字体命中的规则,当 Safari 看到 .style_from_lanhu
样式时,Safari 的处理为:
-
font-family: DINPro-Bold
直接命中DINPro-Bold.woff
字体,(DINPro-Bold
后面跟着的DINPro
被忽略 ) - 接 着
font-weight: bold;
再加粗一次,此为粗上加粗的原因。
修改方式:
将 @font-face 中的 font-weight: normal;
修改为 font-weight: bold;
,修改后 font-family: DINPro-Bold
叠加 font-weight: bold;
两个条件一起,才会命中字体。
至于 macOS 端 Chrome 为什么没严格遵循字体命中规则,原因暂未知。
更进一步:
为什么 sketch 生成的样式代码如此简洁,蓝湖却要多此一举多生成几行呢?
对比下区别
1 |
.style_from_sketch { |
个人推测是蓝湖为了兼容 @font-face
的另一种写法,也是更主流的一种写法,即 family:DINPro
&& weight:bold
命中 DINPro-Bold.woff
字体。
1 |
@font-face { |
另一方面,自定义字体在未下载下来的时候,有一个默认的 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://www.zachleat.com/web/comprehensive-webfonts/#font-display
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/
本站仅做收录,版权归原作者所有。