我转过几个弯 绕过那个小雨楼
- 拿着蒲扇摆着衣衫渡着紧箍咒
- 不问天涯不停留 喝过几壶酒
- 不过年少白头道义放胸口
- 倘若明天之后 遥看前尘剑封侯
- 似那天上神仙无所求
- 朝朝暮暮君如梦醒十分不为何理由
- 是真是假是惶恐是无休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 又过了几个弯 算尽天量道莫慌
- 踏这田园闻这芳草香
- 跌跌撞撞仗剑天涯折煞不枉无笔良
- 是梦是幻是温柔是家乡
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 谁能与我一醉方休
css使用系统字体作为网页字体最佳实践
木灵鱼儿
34 天前CSS
190
0
0
目前前端对字体的选择，最好的做法就是用系统的默认字体，这样省去了对每个操作系统的字体判断，谁知道我们指定的这个字体用户安装没有，而且字体文件一向都很大，特别是中文字体。
但是对于指定系统字体，其实也是需要兼容的，这里就放上一个专业的字体文章：《奇思妙想 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，所以，问题得以解决。
喜大普奔。
0
评论(0)