CSS3文本字体相关属性

简介: 本文介绍CSS3文本字体相关属性的用法
<!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>

image.png

image.png

相关文章
|
5天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
40 28
|
19天前
|
前端开发 算法 开发者
CSS 的了解text-rendering属性
【8月更文挑战第24天】
|
24天前
|
前端开发 搜索推荐 UED
浅谈css的cusor属性
浅谈css的cusor属性
30 1
|
25天前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
27天前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
39 0
|
1月前
|
前端开发
使用CSS样式化占位文本
使用CSS样式化占位文本
14 0
|
1月前
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
25 0
|
1月前
|
前端开发 UED 开发者
使用 CSS 的 line-height 属性来提高可读性
使用 CSS 的 line-height 属性来提高可读性
15 0
|
1月前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
23 0
|
1月前
|
前端开发
了解 css中 backface-visibility 属性
了解 css中 backface-visibility 属性
31 0