2016/09/21 WEB前端 1 Comments 网页字体图标锯齿问题 ##### 当网页中的字体图标缩小时可能会遇到部分图标存在锯齿现象,可以通过CSS3属性webkit-text-stroke-width设置对象文字描边厚度进行简单处理: ```css //消除锯齿 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-stroke-width: 0.2px; ``` **未添加除锯齿样式 和 添加除锯齿样式后的前后对比:** ![](https://www.fity.cn/usr/uploads/2018/08/20180802033101_86097.jpg) **PS:**webkit-text-stroke是居中描边 ------------ ##### **扩展:** 让文字正体显示为背景模样,再配合-webkit-text-stroke描边也是不错的一种体验 ```css -webkit-text-stroke-width: 0.5px; -webkit-text-fill-color: transparent; ``` ![](https://www.fity.cn/usr/uploads/2018/08/20180802033412_72542.png) 本文最后更新于 2019-07-09 22:05:43 并被添加「css3」标签,已有 2512 位童鞋阅读过。 本文作者:未来往事 本文链接:https://felixway.cn/post/650.html 本站使用「署名 4.0 国际」创作共享协议,可自由转载、引用,但需署名作者且注明文章出处
学习了
学习了