CSS中的文字美化与装饰属性

Posted 2022-08-15 公众号_前端每日技巧

text-shadow

​​text-shadow​​是文字阴影，不支持inset关键字，也就是text-shadow只有外阴影，没有内阴影，不支持阴影扩展，最多支持3个数值，分别表示水平偏移、垂直偏移和模糊大小。

// 右方、下方偏移2px，模糊3px
text-shadow: 2px 2px 3px red;

text-stroke

​​text-stroke​​和​​text-fill-color​​分别用来实现文字描边效果和文字颜色填充效果。text-stroke属性是text-stroke-width和text-stroke-color两个css属性的缩写，分别表示文字描边的宽度和文字描边的颜色。无法指定文字描边的类型，只支持实线描边，不支持点线或者虚线描边，也无法指定描边是外描边还是内描边或居中描边。text-stroke属性的使用频率小于text-fill属性，因为text-stroke的文字描边效果是居中描边。

.wrapper 
    -webkit-text-stroke: 3px black;

​​text-stroke-width​​属性默认值为0，也支持medium关键字，当我们使用text-stroke属性的时候，是一定要设置描边的宽度值的。

​​text-fill-color​​属性可以对文字进行颜色填充，还可以覆盖color属性设置的颜色，只能覆盖color的渲染表现，实际上元素的颜色计算值还是由color属性决定的。

text-emphasis

​​text-emphasis​​属性对文字进行强调装饰，是​​text-emphasis-color​​和​​text-emphasis-style​​这两个css属性的缩写，text-emphasis不包括​​text-emphasis-position​​属性，text-emphasis-position是独立的。text-emphasis有4种属性，​​text-emphasis-color​​用来强调的字符颜色，初始值就是当前的文字颜色。​​text-emphasis-style​​接收值为​​none​​，也是默认值，表示乜有任何强调装饰。接收值为​​string​​表示使用任意单个字符作为强调装饰符。

text-emphasis: circle red;

text-emphasis-style内置有几个装饰符效果。分别为​​dot​​(点)、​​circle​​(圆)、​​double-circle​​(双层圆)、​​triangle​​(三角)、​​sesame​​(芝麻点)。每一种装饰符都有实心和空心两种类型。这两种类型由​​filled​​和​​open​​两个关键字决定的。

// 实心的圆点
text-emphasis: filled dot;
//等同于 text-emphasis: dot;
// 空心的圆点
text-emphasis: open dot;
//等同于text-emphasis: open;

​​text-emphasis-position​​属性用来指定强调装饰符的位置。默认位置在文字的上方，我们也可以指定强调装饰符在文字的下方，也可以指定文字竖向排版的时候强调装饰符是位于文字左侧还是文字右侧。初始值为over right。right定位用在文字竖向排版的时候。

text-orientation

​​text-orientation​​可以设置竖向排版时中文和文字字符的方向。接收的参数有三个，分别是​​mixed​​、​​upright​​、​​sideways​​。​​mixed​​是默认值，表示中文和英文显示方向是不一致的，中文字符是正立的，而英文字符则顺时针旋转90度后显示。​​upright​​表示中文和英文的文字显示方向都是默认的正文显示，没有旋转。​​sideways​​表示中文和英文的文字显示方向都是顺时针旋转90度。

text-combine-upright

​​text-combine-upright​​属性可以让2-4个字符横向合并显示。接收的参数有三个，分别为​​none​​、​​all​​、​​digits​​。​​none​​是默认值，表示字符不会参与横向合并。​​all​​表示所有类型的字符都会参与横向合并，不过一个标签内最多只能合并4个字符。​​digits​​表示仅数字字符参与横向合并。text-combine-upright属性实现的水平排版，则会让2-4个字符(包括中文)全部在一个字符宽度中。

<div class="warpper"><span>学习</span></div>
.warpper 
    writing-mode: vertical-rl;

.warpper span 
    text-combine-upright: all;

unicode-bidi

​​unicode-bidi​​属性总是和direction属性配合使用，用来设置字符水平流向的细节。可以接收很多值。例如​​normal​​、​​embed​​、​​bidi-override​​、​​plaintext​​、​​isolate​​、​​isolate-override​​；属性​​isolate​​和​​embed​​的作用都是让中文字符和英文字符从左往右排列，让问号和加号等字符从右向左排列。属性​​isolate-override​​和​​bidi-override​​的作用都是让所有字符从右往左排列。​​isolate​​和​​isolate-override​​会让元素作为独立的个体参与到兄弟元素之间的访问排列。​​plaintext​​属性值可以在不改变当前文档的水平流向的前提下，让所有字符按照默认的从左往右的流向排列。

tab-size

​​tab-size​​属性可以控制Tab键输入的空格的长度大小，属性语法tab-size: ​​<integer>​​ | ​​<length>​​，integer为整数值，表示Tab键输入的空格的宽度等于几个space键输入的空格的宽度。length表示长度值，表示每个Tab键输入的空格的宽度值。

text-rendering

​​text-rendering​​属性用来对于文字内容的渲染，接收的值有​​optimizeSpeed​​表示浏览器渲染文本的时候是速度优先，这个属性值会禁用文字的自动字距调整和字符相连特性。​​optimizeLegibility​​表示浏览器渲染文本的时候是可读性优先，这个属性值会启用文字的自动字距调整和文字相连特性。​​geometricPrecision​​表示浏览器渲染文本的时候是几何精度优先,可以用于字距的非线性调整和小数像素的精确渲染。​​auto​​表示浏览器自己判断文字渲染时是速度优先、可读性优先还是几何精度优先。

text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
text-rendering: auto;

font-smooth

​​font-smooth​​属性用来设置文字的抗锯齿渲染。接收的值有auto是初始值，由浏览器决定文字的坑锯齿渲染程度，表示浏览器只能选择字体渲染表现。​​none​​表示关闭坑锯齿，字体边缘锋利。​​antialiased​​表示字体像素级平滑，在深色背景上会让字体看起来更细。​​subpixel-antialiased​​表示字体亚像素级平滑，主要为了在非视网膜设备下有更好的显示效果。​​grayscale​​表示灰度坑锯齿渲染，可以让深色背景下的文字看起来更细。

.warpper 
    -webkit-font-smoothing: antialiased;

font-stretch

​​font-stretch​​属性需要字体中有对应的或窄或宽的字体面，否则没有效果，而且支持百分比值和属性值，最多支持多达9个不同拉伸程度地关键字属性值。接收的关键字有​​normal​​表示正常的字体宽窄表现。​​semi-condensed​​、​​condensed​​、​​extra-condensed​​、​​ultra-condensed​​表示字体不同程度地收缩，其中​​ultra-condensed​​是收缩程度最厉害的。

font-stretch: ultra-condensed;
font-stretch: normal;
font-stretch: 40%;
font-stretch: 80%;

font-synthesis

​​font-synthesis​​表示就算字体中没有对应的粗体和斜体，也会通过字形变化合成粗体效果和斜体效果。默认值为​​weight​​表示如果需要，可以合成粗体字体。​​none​​表示粗体和斜体都不需要合成。​​style​​表示如果需要，可以合成斜体字体。

font-variant-numeric

​​font-variant-numeric​​属性主要用来设置数字的变体效果。接收的参数有​​normal​​表示使用正常的数字效果，不使用变体字形。​​ordinal​​表示强制使用序数标记特殊的标志符号。​​slashed-zero​​关键字属性值强制使用带斜线的0。​​lining-nums​​和​​oldstyle-nums​​用来控制数字的样式，​​lining-nums​​表示数字沿着基线对齐，​​oldstyle-nums​​表示数字采用传统对齐方式。​​proportional-nums​​和​​tabular-nums​​用来控制数字的尺寸。​​proportional-nums​​表示每个数字占据的宽度并不一致，宽度大小由字体大小决定。​​tabular-nums​​表示每个数字占据的宽度都是一样的，数字就好像被约束在宽度一致的表格中。

​​diagonal-fractions​​和​​stacked-fractions​​用来控制分数的样式。其中​​diagonal-fractions​​表示让分子和分母尺寸变小并将两者用斜线隔开。​​stacked-fractions​​表示让分子和分母尺寸变小并将两者用水平线隔开。

font-variant-alternates

​​font-variant-alternates​​属性主要用来让字体发生变化，包括样式和风格的变化，以及字符集和字符的变化，从而让字体变得花哨或者变成装饰字符、注释字符等。