中文文字描边问题

前言

文字描边是我在做公司官网的时候经常会遇到的样式，但是常规使用 text-stroke 在中文文字中，效果并不是很好。

中文复杂的笔画在使用 text-stroke 的时候，会出现描边互相交错的情况，因此我通常采用 text-shadow 来实现文字描边。

重点

使用 text-shadow 描边的时候，直接设置 0 0 1px 就可以实现描边效果，但是这样的描边非常的淡，效果并不好，因此需要使用八个方向的阴影来实现描边效果。

阴影值	水平偏移	垂直偏移	作用方向
1px 0px 0 #d67359	1px	0px	右侧
-1px 0px 0 #d67359	-1px	0px	左侧
0px 1px 0 #d67359	0px	1px	下方
0px -1px 0 #d67359	0px	-1px	上方
1px 1px 0 #d67359	1px	1px	右下
-1px -1px 0 #d67359	-1px	-1px	左上
-1px 1px 0 #d67359	-1px	1px	左下
1px -1px 0 #d67359	1px	-1px	右上

这样实现的描边效果最好。

对比

Demo

源码

import styles from "./index.module.css";
const TestStrokeDemo = () => {
 return <div className={styles.testStrokeDemo}>
     <p className={styles.useStroke}>使用 text-stroke 描边</p>
     <p className={styles.useNormalStroke}>使用 text-stroke 描边</p>
     <p className={styles.useShadow}>使用 text-shadow 描边</p>
 </div>;
};
export default TestStrokeDemo;

CSS

.testStrokeDemo {
font-size: 40px;
font-weight: bold;
color: white;
}

.useStroke {
-webkit-text-stroke: 1px #d67359;
}

.useNormalStroke {
text-shadow: 0 0 1px #d67359;
}

.useShadow {
text-shadow: 1px 0px 0 #d67359, -1px 0px 0 #d67359, 0px 1px 0 #d67359,
0px -1px 0 #d67359, 1px 1px 0 #d67359, -1px -1px 0 #d67359,
-1px 1px 0 #d67359, 1px -1px 0 #d67359;
}