木灵鱼儿

木灵鱼儿

阅读：1691

最后更新：2021/03/15/ 15:48:34

css使用系统字体作为网页字体最佳实践

目前前端对字体的选择，最好的做法就是用系统的默认字体，这样省去了对每个操作系统的字体判断，谁知道我们指定的这个字体用户安装没有，而且字体文件一向都很大，特别是中文字体。

但是对于指定系统字体，其实也是需要兼容的，这里就放上一个专业的字体文章：《奇思妙想 CSS 文字动画》；虽然这个文章名字叫动画，但是里面内容很丰富，自己学习。

以css-tricks的为模板，提取其中精华，大概是这么一条信息：

{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
}

具体含义上面那个外链文章都有，这里就讲下怎么用？

怎么用？

一般肯定会说，这还不简单，body一把梭啊！

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
}

但是这样你会遇到一个问题，在谷歌浏览器中，我们可以看到button按钮他是有一个默认css样式的。

这个样式他会将body设置的font-family覆盖，因为font简写的优先级是高于body的设置的。

于是乎，这个效果就会不完美，如果我们修改了浏览器的默认字体，你就会在网页上看到两种字体共存，相当难看。

解决办法也是有的：

:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
}

*,
::after,
::before {
    font-family: inherit;
}

使用根元素+*选择器，加上伪元素选择器，通过继承，此时我们的选择器权限高于默认的样式font，所以，问题得以解决。

喜大普奔。

文章分类 CSS
文章标签 字体cssfontfont-family系统字体
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 1691

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1691

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

目录树