.title{ font-family: PingFang-SC-Bold; } 很不幸,你用错了font-family。 用错的原因 对字体的fallback机制缺乏了解,只关心自己的苹果手机(例子中为苹果字体)展现正常,殊不知还有无数的安卓用户体验很差。 目标 和设计师综合考虑系统兼容性、前端实现和无障碍视觉来制定字体规范,减少前端返工,提升双端用户视觉...
天猫:font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; Github:font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; 其中system-ui,-apple-system,BlinkMacSy...
font-family: PingFangTC-Medium, sans-serif; font-family: PingFangTC-Semibold, sans-serif; 苹方-港 的 CSS font-family 使用: font-family: PingFangHK-Regular, sans-serif; font-family: PingFangHK-Ultralight, sans-serif; font-family: PingFangHK-Light, sans-serif; font-family: PingFangHK-Thi...
天猫:font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; Github:font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; 其中system-ui,-apple-system,BlinkMacSy...
当然,上述 font-family 的定义不一定是最佳的。譬如天猫在最前面添加了 "PingFang SC",miui,..必定也有他们的业务上的考虑。但是一些 fallback 方案向后兼容的思想都是一致的,值得参考学习。 字体定义规则建议 结合你该知道的字体 font-family[10]最后给出的规则建议,加上本文...
如图,由于在第一位的 -apple-system 生效,所以当前中文字体为 PingFang SC,西文字体为 .SF NS。 2. 爱奇艺 由于将苹方写在最前面,因此西文字体也是苹方自带的西文,所以写在后面的 Helvetica 没有生效。 有些会在网页中显示特定字体: 3. 腾讯官网
天猫[2]:font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; Github[3]:font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;...
font-family:'PingFang SC','Microsoft YaHei','SimSun','Arial', sans-serif 上面的设置,页面上首选字体是平方字体,如电脑上没平方字体,就是显示微软雅黑,依次类推... 在设置一些中文字体的时候,有些童鞋(以前的我)喜欢直接用中文,其实不太好哟,还是回归到统一的英文,在这里分享一些常用中文转英文的字体: ...
天猫[2]:font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; Github[3]:font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; ...
华文黑体：STHeiti 华文楷体：STKaiti 华文宋体：STSong 华文仿宋：STFangsong 苹果方字体示例 苹果方-简常规体：font-family: PingFangSC-Regular 极细体：font-family: PingFangSC-Ultralight 使用Node.js压缩字体 通过font-spider工具压缩字体，步骤如下：全局安装font-spider：npm install font-...