CSS3 基础（4）—— CSS3文本和字体

最新推荐文章于 2022-07-05 20:05:27 发布

原创最新推荐文章于 2022-07-05 20:05:27 发布 · 813 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

44 篇文章

订阅专栏

CSS3

10 篇文章

订阅专栏

本文详细介绍了CSS3中的文本样式，包括文本阴影、文本边框、文本换行、文本最后一行对齐和文本溢出时的样式。此外，还讲解了字体设置的基本语法和推荐的通用模板。重点讨论了不同属性的语法、兼容性和使用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、文本

（一）文本阴影（text-shadow）

设置文本阴影。

语法

text-shadow:h-shadow v-shadow blur color

兼容

IE10+、FireFox3.5+、Chrome4+、Safari4+、Opera9.5+

案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>text-shadow</title>
    <style type="text/css">
        div{
            font-size:30px;
            text-shadow: 10px 5px 3px rgba(0,255,0,.6);
        }
    </style>
</head>
<body>
    <div>苟利国家生死以，向天再借500年！</div>            
</body>
</html>

这里写图片描述

值分别为：水平位移竖直位移模糊半径颜色

（二）文本边框（text-outine）

设置文本边框的。

语法

text-outline:thickness blur color:

兼容

主流浏览器不支持。

（三）文本换行（word-break 和 word-wrap）

每一个汉字会被当成一格单词会自动换行，只有一段连续的字母会被当做完整的单词，才会出现溢出。

1.word-break

用来标明怎么样进行单词内的断句，定义元素内容文本的字间与字符间的换行行为。

语法

word-break：normal | keep-all | break-all | break-word

值	说明
normal	默认换行规则（字符文本正常换行，单词截断换行）
break-word	保证单词的完整性，不允许截断单词进行换行，如果当前行的空间放不下一个完成单词会换行。
break-all	单词会被截断并换行
keep-all	只能在半角空格或连字符(标点符号)处换行

兼容

IE5.5 、FireFox15+、Chrome4+、Safari3.1+、Opera15+

normal

这里写图片描述

break-word

这里写图片描述

break-all

这里写图片描述

keep-all

这里写图片描述

2.word-wrap

设置或检索当内容超过指定容器的边界时是否断行。

值	说明
normal	允许内容顶开或溢出指定的容器边界。
break-word	内容将在边界内换行，如果需要，单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位，如果当前行无法放下需要被打断的单词，为了保持完整性，会将整个单词放到下一行进行展示。这与word-break的break-word值效果相同

兼容

IE5.5、FireFox3.5+、Chrome23+、Safari6.1+、Opera12.1+

（四）文本最后一行对齐（text-align-last）

规定如何对齐文本的最后一行。

语法

text-align-last：auto | start | end | left | right | center | justify

值	说明
auto	无特殊对齐方式。
left	内容左对齐。
center	内容居中对齐。
right	内容右对齐。
justify	内容两端对齐。
start	内容对齐开始边界。
end	内容对齐结束边界。

（五）规定文本溢出时的样式（text-overflow）

定义内联内容溢出其块容器是否截断或者添加(…)及自定义字符，元素的overflow还必须要设置成hidden才会显示出效果。

值	说明
clip	当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis	当内联内容溢出块容器时，将溢出部分替换为（…）。
string	可以自定义省略的符号。(只有火狐浏览器支持)

兼容

IE6.0+、FireFox7.0+、Chrome4.0+、Safari3.1+、Opera11.1+（9.0 -o-）

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        p { width: 500px;font-size:20px; margin: 10px auto; background: #abcdef;overflow: hidden;}
        p.p1{
            text-overflow: ellipsis;
        }
        p.p2{
            text-overflow: clip;
        }
        p.p1:hover,
        p.p2:hover{
            overflow: visible;
        }
        /*此处写代码*/
    </style>
</head>
<body>
    <p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
    <p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
</body>
</html>

这里写图片描述

二、字体

设置嵌入HTML文档的字体。

语法

@face-face{
    font-family:<YourWebFontName>;
    src:<source>[<format>][,<source>[<format>]]*;
    [font-weight:<weight>];
    [font-style:<style>];
}

值	说明
YourWebFontName	自定义的字体名称，将被引用到Web元素中的font-family
source	自定义的字体的存放路径，可以是相对路径也可以是绝对路径。
format	自定义字体格式，主要用来帮助浏览器识别。
weight	定义字体是否是粗体。
style	定义字体的样式，如斜体。

（一）format 字体格式

字体格式	说明	兼容
TureType(.ttf)	windows和Mac的最常见的字体，是一种raw格式，它不为网站优化。	IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Moblie Safari4.2+
OpenType(.otf)	.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上。	FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、IOS Moblie Safari4.2+
Web Open Font Format(.woff)	是Web字体中的最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。	IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1
Embedded Open Type(.eot)	是IE专用的字体，可以从TrueType创建此格式字体。	IE4+
SVG(.svg)	基于SVG字体渲染的一种格式。	Chrome4+、Safari3.1+、Opera10+、IOS Moblie Safari3.2+