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