阅读本文前建议先了解 -webkit-font-smoothing戳这里查看

最近在调整本blog的header样式的时候发现一个神奇的问题,当一个元素从 position:fixed; 变更为(header上有个按钮 点击可以另header不固化在顶部)position:relative; 的时候,Safari对该元素内字体的渲染居然发生了变动,视觉上字体变得更细了。

如下是正常情况下的字体渲染效果:

CSS如下

header {
position:fixed;
font-weight:100;
font-size:14px;
font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;
}

然后,当header的 position 变为 relative 的时候,字体渲染效果如下:

在视觉上,变更后的字体显得更加的细,所以也导致在排查问题的时候被误导了很久,一直在找是不是哪里的font-weight冲突了,结果是没有的,font-weight:100 正确应用在header元素上,最后参考老外的答案,发现了这么个属性: -webkit-font-smoothing ,该属性控制字体渲染时的抗锯齿效果,且只在MacOs上有效,默认是 autosubpixel-antialiased,次像素平滑,会采样周围像素进行平滑填充,所以在视觉上次像素平滑渲染出来的字体是比较大的).

在我的测试中, 新建一个测试html页面, Safari(MacOS 10.12.3)在视觉上渲染的效果是 subpixel-antialiased ,而在blog的页面中,除了header中的字体,其他层渲染效果都是 antialiased(灰度平滑,所以全站的字体实际是比较细的),经过排查发现是一个背景画布图层造成的:

<div id="tttt" style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: -1;">
<canvas class="particles-js-canvas-el" width="2242" height="1834" style="width: 100%;height: 100%;display: none;"></canvas>
</div>

当去掉这个图层之后,字体渲染正常,为何这个图层会导致除了header之外字体渲染被设置为 antialiased 至今没想明白。

回顾一下开头提到的问题,当header的 positionfixed 切换为 relative 的时候,header里的字体变细了,这说明字体渲染由 subpixel-antialiased 变为 antialiased,所以手动设置body的渲染配置即可:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

字体渲染抗锯齿CSS属性: -webkit-font-smoothing

前言 -webkit-font-smoothing 控制的字体渲染只对MacOS的Webkit有效。 所以,你在MacOS测试环境下面设置 -webkit-font-smoothing 时,只要你不把它设置为none...

阅读全文

本地调试关闭Chrome的同源策略

右键chrome的快捷方式,在“目标”尾部追加两个参数 --user-data-dir --disable-web-security 关闭所有chrome实例重新打开即可。

阅读全文

编译SCSS/SASS报错Invalid GBK character解决方案

webstorm中编辑scss文件可以添加一个watcher实现实时的css编译输出预览功能,今日在配置webstorm环境的时候发现报了某个scss文件Invalid GBK character编译错...

阅读全文

2 条评论

欢迎留言