字体相关属性测试

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/><title>CSS字体属性设置</title></head><body><!--设置文字颜色灰色--><span style="color:#888888">color:#888888</span><br/><!--设置文字颜色红色--><span style="color:red">color:red</span><br/><!--设置文字字体为隶书--><span style="font-family:'隶书'">font-family:'隶书'</span><br/><!--设置文字字体大小20--><span style="font-size:20pt">font-size:20pt</span><br/><!--设置文字字体大小为绝对最小--><span style="font-size:xx-small">font-size:xx-small</span><br/><!--设置文字字体大小为绝对较小--><span style="font-size:x-small">font-size:x-small</span><br/><!--设置文字字体大小为绝对小--><span style="font-size:small">font-size:small</span><br/><!--设置文字字体大小为绝对正常--><span style="font-size:medium">font-size:medium</span><br/><!--设置文字字体大小为绝对大--><span style="font-size:large">font-size:large</span><br/><!--设置文字字体大小为绝对较大--><span style="font-size:x-large">font-size:x-large</span><br/><!--设置文字字体大小为绝对最大--><span style="font-size:xx-large">font-size:xx-large</span><br/><!--设置文字字体大小为相对父元素字体增大--><span style="font-size:larger">font-size:larger</span><br/><!--设置文字字体大小为相对父元素字体缩小--><span style="font-size:smaller">font-size:smaller</span><br/><!--设置文字不拉伸--><span style="font-strength:normal">font-strength:normal</span><br/><!--设置文字横向压缩--><span style="font-strength:narrower">font-strength:narrower</span><br/><!--设置文字横向拉伸--><span style="font-strength:wider">font-strength:wider</span><br/><!--设置文字不倾斜--><span style="font-style:normal">font-style:normal</span><br/><!--设置文字斜体--><span style="font-style:italic">font-style:italic</span><br/><!--设置文字倾斜--><span style="font-style:oblique">font-style:oblique</span><br/><!--设置文字更细--><span style="font-weight:lighter">font-weight:lighter</span><br/><!--设置文字粗细正常--><span style="font-weight:normal">font-weight:normal</span><br/><!--设置文字加粗--><span style="font-weight:bold">font-weight:bold</span><br/><!--设置文字更粗--><span style="font-weight:bolder">font-weight:bolder</span><br/><!--设置文字加粗900--><span style="font-weight:900">font-weight:900</span><br/><!--设置文字是否有修饰线之无修饰--><span style="text-decoration:none">text-decoration:none</span><br/><!--设置文字是否有修饰线之闪烁--><span style="text-decoration:blink">text-decoration:blink</span><br/><!--设置文字是否有修饰线之下划线--><span style="text-decoration:underline">text-decoration:underline</span><br/><!--设置文字是否有修饰线之删除线--><span style="text-decoration:line-through">text-decoration:line-through</span><br/><!--设置文字是否有修饰线之上划线--><span style="text-decoration:overline">text-decoration:overline</span><br/><!--设置文字大写字母格式--><span style="font-variant:small-caps">font-variant:small-caps</span><br/><!--设置文字阴影效果--><span style="text-shadow:-5px -5px 2px gray">text-shadow:-5px -5px 2px gray</span><br/><!--设置文字不转换大小写--><span style="text-transform:none">text-transform:none</span><br/><!--设置文字首字母大写--><span style="text-transform:capitalize">text-transform:capitalize</span><br/><!--设置文字大写--><span style="text-transform:uppercase">text-transform:uppercase</span><br/><!--设置文字小写--><span style="text-transform:lowercase">text-transform:LOWERCASE</span><br/><!--设置字体行高--><span style="line-height:30pt">line-height:30pt</span><br/><!--设置字符之间的间隔--><span style="letter-spacing:5pt">letter-spacing:5pt</span><br/><!--设置字符之间的间隔--><span style="letter-spacing:15pt">letter-spacing:15pt</span><br/><!--设置单词之间的间隔--><span style="word-spacing:20pt">word-spacing:20pt hello world</span><br/><!--设置单词之间的间隔--><span style="word-spacing:60pt">word-spacing:60pt hello world</span><br/></body>
</html>

网页展示

【CSS3】CSS3文本字体相关属性大全相关推荐

[css] 请说说CSS3实现文本效果的属性有哪些？
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例
CSS学习笔记 CSS的基本概念 Cascading Style Sheet层叠样式表标签:<p> <div>-之类的标签使用方式:直接输入标签名类(class):cla ...
【CSS3】CSS3文本相关属性大全
说明本文的"文本"相关属性控制的是整段.整个div内文本的显示效果,包括文本文字的缩进.段内文字的对齐方式.文本中空白字符的处理等等,需要掌握. 网页源码 <!DOCTYP ...
css3属性文字换行,CSS3让文本自动换行——word-break属性
1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...
CSS3 文字与字体相关样式
CSS3 给文字添加阴影,使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中删除了,在 CSS3 的 text 模块中 ...
css字体样式属性大全（内附实例）
目录 font-size:字号大小 font-family:字体 font-weight:字体粗细 font-style:字体风格综合设置字体样式 font-size:字号大小 font-size ...
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
文章目录 3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transf ...
Css的字体样式属性大全
转:http://www.divcss5.com/rumen/r27838.shtml CSS 属性: 字体样式(Font Style) 1 字体样式 {font:font-style font-va ...
CSS3的字体和文本相关属性
CSS3其中一个重要变化就是增加了服务器字体功能,这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题.通过CSS3的服务器字体功能,可以控制浏览器使用服务器包含的字体,这样可以保证即使我们的电 ...

【CSS3】CSS3文本字体相关属性大全

字体相关属性测试

网页展示

【CSS3】CSS3文本字体相关属性大全相关推荐

最新文章

热门文章