优化网页字体渲染效果的CSS

原理：

  • 通过浏览器插件在网页中注入自定义CSS代码来修改字体样式。

可用插件：

需要注入的CSS代码：

1
2
3
4
5
6
7
8
9
/* 修改字体 */
*:not([class*="icon"]):not(i){
	font-family: "mononoki", "方正兰亭圆简体_细" !important;
}

/* 添加适当的阴影效果，增强渲染质感 */
* {
	text-shadow: 0.02em 0.02em 0.1em #555555 !important;
}

注意：

  • 使用西文字体代替上方的”mononoki”;
  • 使用中文字体代替上方的”方正兰亭圆简体_细”;
  • 西文字体的位置要放在中文字体左侧位置，否则西文字体会被中文字体覆盖;
  • [text-shadow]设置文字阴影的四个属性值如下表所示：
    值 描述
    h-shadow 必需。水平阴影的位置。允许负值。
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊的距离。
    color 可选。阴影的颜色。参阅CSS颜色值