• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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

190 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
  • 本文分类:CSS
  • 本文标签:字体cssfontfont-family系统字体
  • 流行热度:已超过 190 人围观了本文
  • 最后更新:2021年03月15日 - 15时48分34秒
  • 发布日期:2021年03月15日 - 15时46分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码