text-shadow

text-shadow 顾名思义，就是文字阴影，这个属性比 box-shadow 简单，因为 box-shadow 有内阴影，但是 text-shadow 没有内阴影，这个也很好理解，一个文字怎么会有内阴影这个说法呢。同时 text-shadow 也没有扩展这一说，阴影大小就和文字大小一样。

css

.test {
            width: 100px;
            height: 200px;
            font-size: 50px;
            text-shadow: 3px 3px 3px #f40;
        }

这几个参数其实都知道是啥，第一个是 x 轴偏移量，第二个参数是 y 轴偏移量，第三个参数是模糊半径，第四个参数就是颜色，当然第四个参数可以写在最开始。

如果不设置颜色，那么默认值和文字颜色是一样的

text-shadow 也允许设置多个，多个阴影用逗号隔开

text-shadow 常用于制作浮雕效果，如果我要制作一个浮雕效果，我设置一个纯黑的阴影，然后在其反方向设置一个高亮，也就是纯白阴影，就可以实现这个效果。

css

.test {
            width: 100px;
            height: 200px;
            font-size: 50px;
            text-shadow: 1px 1px black, -1px -1px white;
        }

095ea7dd458f8b2d4cb449e93f093359_MD5

此时这个 TEST 文字就有了浮雕效果，像是浮于背景之上的。

其实浮雕效果只要换一个角度看，就可以变成镂刻效果

和前面的 box-shadow 一样，text-shadow 的模糊也是往两侧模糊，举个例子, text-shadow: 0px 0px; 这个是看不到效果的，因为阴影是完全重叠在文字之下，如果我加上模糊 text-shadow: 0px 0px 10px;，这个时候就能看到阴影了，可以看到模糊其实是可以将阴影实际面积增大的。

在 box-shadow 那里，我们使用模糊实现了一个发光的效果，这里我们也可以用边缘模糊实现一个文字发光的效果，这个效果也很普遍。

css

.test {
            width: 100px;
            height: 200px;
            font-size: 80px;
            color: #ddd;
            text-shadow: 0px 0px 10px #0f0, 0px 0px 20px #0f0, 0px 0px 30px #0f0;
        }

283d14972cde832692d39dd98a7aef04_MD5

这样就实现了一个文字发光效果

注意这里的一个小问题，阴影是位于文字内容和背景中间的，而前面学过的 background-clip: text;, 则是让背景显示在文字区域内，本质上还是背景，所以如果使用了这个属性添加阴影之后，阴影是会盖住文字区域的。

-webkit-text-stroke

这个属性用于设置文字描边效果，可以实现一个类似下图的效果，写法为：-webkit-text-stroke: 1px red;，写上像素+颜色即可。

5f17f0c6a29544633997471b84322afb_MD5

注意，这个描边并不是文字的一部分，所以设置字体颜色对描边没有影响，比如我可以将字体设置为透明，就得到了如下效果

font

接下来是和字体相关的，我们其实知道 font-family 其实可以指定字体样式，比如楷体，宋体这类，但这里有一个问题，当我们指定字体样式的时候，实际上是在调用系统字体，也就是说如果用户系统没有我设置的这个字体，就会导致我设置的字体失效，为了避免这个问题，让我写的字体永远都有效，就可以使用 font-face 在网页中引入外部字体，这样当用户浏览我的网页之后，就会自动把我引入的这个字体下载下来，并且在我的网页中使用，也就避免了字体失效的问题。

css

@font-face{
	font-family:"abc";
	src:url();
}

div{
	font-family:"abc";
}

在 font-face 中，font-family 用来给我引入的这个字体取名，src 则表示我从哪个路径引入。写上这两个属性之后，就可以在其他地方使用我设置的这个名字了。

css

@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

src 属性可以写多个不同格式的字体，这个 format 实际上是出于兼容性考虑的写法，如果不考虑兼容性那完全可以不用写，它是格式提示器，用来告诉浏览器我这个是字体。

可以在 font-face 内部写一些默认样式，font-face 更常用的其实是用来写字体图标，中文网站很少会引入自定义字体，因为中文字体库普遍较大，引入会导致性能问题。

text-fill-color

这个属性可以用来设置文字填充颜色，默认情况下用的就是 color 来填充，如果同时设置 text-fill-color，则会覆盖掉 color。

但 color 被覆盖了并不影响 color 继承下去，也就是说在他子元素中也可以使用 color 属性继承到。

这个属性需要加上厂商前缀 -webkit-

text-emphasis

文字强调，可以在文字上面加上一些形状用来强调，第一个参数为颜色，后面的参数为形状的样式，可以参考 MDN 文档

text-emphasis - CSS: Cascading Style Sheets | MDN

还可以使用 text-emphasis-position 来设置位置，可参考：text-emphasis - CSS: Cascading Style Sheets | MDN

text-orientation

改属性可以控制文本展示方向

我们可以使用 writing-mode 来控制文本的排列方式，比如我们可以让文字竖着排，可以参考 writing-mode - CSS：层叠样式表 | MDN

如果设置了 writing-mode，中文是不会竖着展示的，或者说中文不会旋转，实际上我们可以使用 text-orientation 设置。

mixed 默认值。顺时针旋转水平书写的字符 90°，将垂直书写的文字自然布局。
upright 将水平书写的字符自然布局（直排），包括垂直书写的文字（as well as the glyphs for vertical scripts）。注意这个关键字会导致所有字符被视为从左到右，也就是 direction 被强制设为 ltr。
sideways 所有字符被布局为与水平方式一样，但是整行文本被顺时针旋转 90°。

text-shadow ​

-webkit-text-stroke ​

font ​

text-fill-color ​

text-emphasis ​

text-orientation ​