2017-11-15 16:08
如何重现:Code Pen 样例页面(使用最新版 iOS/macOS Safari 访问)
解决方式:
font-synthesis: style;
样例截图:
macOS High Sierra 10.13.1 - Safari
说明:
-apple-system
指定字体(即同时使用苹方与 San Francisco)font-synthesis: initial
相当于 font-synthesis: weight style
,因此不能使用 font-synthesis: none
,否则会影响斜体(font-style)的合成关于字体样式的补充:
font-family: -apple-system, BlinkMacSystemFont, ..., sans-serif
根据上述限制,推荐在项目中使用 mixin 实现粗体:
/* postcss-mixins 的例子 */
@define-mixin bold {
/* 也可以只应用在 iOS/macOS 上 */
font-weight: 600;
font-synthesis: style;
html[data-android] & {
font-weight: 700;
}
}
.title {
@mixin bold;
}
当中英文同时出现而字重不一的例子,来自 iOS 官方应用: