CSS 设置字体被覆盖的疑问

2018-06-21 10:02:18 +08:00
 darnurash

我通过 Stylish 强制将 a、div 等标签的字体设置为自定义的字体( font-family 设置,不想看见微软雅黑或者中易宋体),一开始加了!important,大部分情况表现良好,但是,有些网页的图标,是通过 JS 加载的,导致会出现豆腐块方框的问题,于是去掉!important 表现正常,结果又有部分标签被网站自带的 css 文件覆盖了我的字体设置。 求解

3580 次点击
所在节点    CSS
11 条回复
ynyounuo
2018-06-21 10:10:53 +08:00
用 !important
然后,后面再跟一条给图标单独的规则以使用 Font Awesome 之类的需求字体来显示图标,然后也 !important

不过 MDN 不建议在拓展或者插件里写 !important
xhyzidane
2018-06-21 10:51:30 +08:00
你的情况应该不是使用 JS 加载图标,而是字体图标。不建议 Stylish 强制改 font-family,推荐修改浏览器的自定义字体
darnurash
2018-06-21 11:01:44 +08:00
@ynyounuo 单独规则🤔
darnurash
2018-06-21 11:02:29 +08:00
@xhyzidane 那样做只有像维基百科那种网站才会正常,大部分国内网页完全无视我的设置
ynyounuo
2018-06-21 11:04:47 +08:00
@darnurash 找到图标所在的 id 或者 class 单独设置啊,反正后面的优先级高。
TypeNANA
2018-06-21 11:25:05 +08:00
yangg
2018-06-21 11:28:11 +08:00
自定义字体,unicode-range https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
把不喜欢的字体覆盖掉。
darnurash
2018-06-21 11:30:43 +08:00
@TypeNANA 我说的就是用这个设置,很多网站没用
darnurash
2018-06-21 11:31:27 +08:00
@yangg 设置 unicode-range 的话,不会让粗体字正确显示
maplerecall
2018-06-21 12:42:03 +08:00
大多数网站的字体配置都是在 html 或者 body 上的,然后就是 input、button 等的一些输入控件,所以给这些元素设置字体可以覆盖大多数地方,另外还可以多加个 body 下的第一层子元素选择器覆盖一些 SPA 的情况,其它地方只能单独写,没有什么通用的规律……

另外实在不喜欢可以直接把系统微软雅黑替换成别的字体,比如微软正在内部测试的替代雅黑的新字体 Noble Scarlet,或者其它定制过的字体,大多数情况下不会出现什么问题
yangg
2018-06-21 12:47:23 +08:00
@darnurash 你没定义粗体覆盖?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/464617

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX