rinald_未来往事

网页字体图标锯齿问题

WEB前端

当网页中的字体图标缩小时可能会遇到部分图标存在锯齿现象,可以通过CSS3属性webkit-text-stroke-width设置对象文字描边厚度进行简单处理:

  1. //消除锯齿
  2. -webkit-font-smoothing: antialiased;
  3. -moz-osx-font-smoothing: grayscale;
  4. -webkit-text-stroke-width: 0.2px;

未添加除锯齿样式 和 添加除锯齿样式后的前后对比:

PS:webkit-text-stroke是居中描边


扩展:

让文字正体显示为背景模样,再配合-webkit-text-stroke描边也是不错的一种体验

  1. -webkit-text-stroke-width: 0.5px;
  2. -webkit-text-fill-color: transparent;

原文作者:rinald
原文地址:https://fity.cn/post/650.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。