CSS中的文字美化与装饰属性
source link: https://blog.51cto.com/u_13349380/5576487
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS中的文字美化与装饰属性
推荐 原创text-shadow
text-shadow
是文字阴影,不支持inset关键字,也就是text-shadow只有外阴影,没有内阴影,不支持阴影扩展,最多支持3个数值,分别表示水平偏移、垂直偏移和模糊大小。
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的文字描边效果是居中描边。
-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-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个字符(包括中文)全部在一个字符宽度中。
.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: optimizeLegibility;
text-rendering: geometricPrecision;
text-rendering: auto;
font-smooth
font-smooth
属性用来设置文字的抗锯齿渲染。接收的值有auto是初始值,由浏览器决定文字的坑锯齿渲染程度,表示浏览器只能选择字体渲染表现。none
表示关闭坑锯齿,字体边缘锋利。antialiased
表示字体像素级平滑,在深色背景上会让字体看起来更细。subpixel-antialiased
表示字体亚像素级平滑,主要为了在非视网膜设备下有更好的显示效果。grayscale
表示灰度坑锯齿渲染,可以让深色背景下的文字看起来更细。
-webkit-font-smoothing: antialiased;
}
font-stretch
font-stretch
属性需要字体中有对应的或窄或宽的字体面,否则没有效果,而且支持百分比值和属性值,最多支持多达9个不同拉伸程度地关键字属性值。接收的关键字有normal
表示正常的字体宽窄表现。semi-condensed
、condensed
、extra-condensed
、ultra-condensed
表示字体不同程度地收缩,其中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
属性主要用来让字体发生变化,包括样式和风格的变化,以及字符集和字符的变化,从而让字体变得花哨或者变成装饰字符、注释字符等。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK