本节介绍文字相关的样式，其中包括 text-shadow 属性、word-break 属性、word-wrap 属性、Web Font 和@font-face 属性，以及 font-size-adjust 属性。
text-shadow属性
在 CSS3 中，可以使用 text-shadow 属性给页面上的文字添加阴影效果。可以给文字指定多个阴影。
用法是 text-shadow: horizontal vertical lblur color;
horizontal：相对于文字的横向偏离值；必选，可为负值；
vertical：相对于文字的竖向偏离值；必选，可为负值；
blur：代表阴影的模糊范围，阴影的模糊半径；可选，默认值为0，
color：阴影的颜色；可选，不指定时默认使用文字的颜色。
如下示例，给文字指定了两个阴影，第一个不指定颜色，默认显示的是文字的颜色，第二个指定颜色。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{text-shadow: 10px 10px 2px, 30px 30px 4px #ccc;color: skyblue;font-size: 40px;font-weight: 50px;font-family: "宋体";}</style></head><body><div>您好</div></body></html>
word-break属性
首先需要知道，浏览器本身自带让文本自动换行的功能。
对于西方文字来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的当中突然断开换行。对于中文来说，可以在任何一个中文字后面进行换行。
如果中文当中含有西方文字，浏览器也会在半角空格或连字符的地方换行，而不会在单词中间强制换行。
当中文当中含有标点符号的时候，浏览器总是不可能让标点符号位于一行文字的行首，通常将标点符号以及它前面的一个文字作为一个整体来统一换行。
首先是一个浏览器默认换行方式的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea{
width: 360px;
height: 200px;
border: 1px solid #ccc;
word-break: normal;
}
</style>
</head>
<body>
<textarea>对于标点符号来说，当word-break属性使用break-all参数值时，在Safari浏览器与Chrome浏览器中，允许标点符号位于行首</textarea>
</body>
</html>
在这个例子中，使用默认的换行方式，可以看到，图中 word-break 连字符单词会被换行。而对于 For punctuation 单词后由于有逗号“,”，但不允许逗号在行首，所以会将 punctuation 和逗号连着一起换行。
在 CSS3 中，可以使用 word-break 属性来自己决定自动换行的处理方法。属性值有：
normal：使用浏览器默认的换行方式；
keep-all：只能在半角空格或连字符处换行；
break-all：允许在单词内换行；
当 word-break 属性使用 keep-all 参数值时，对于中文来说，只能在半角空格或连字符或任何标点符号的地方换行，中文与中文之间不能换行。
textarea{
width: 200px;
height: 200px;
border: 1px solid #ccc;
word-break: keep-all;
}
如下图所示，当使用 keep-all 时，由于中文与中文之间不能换行，所以在“参数值时”后，中文没有继续显示，而是进行了换行。
当 word-break 属性使用 break-all 参数值时，对于西方文字来说，允许在单词内换行。
textarea{
width: 200px;
height: 200px;
border: 1px solid #ccc;
word-break: break-all;
}
如下图所示，当使用了 break-all 时，英文单词也直接被换行，单词并没有完整显示。
word-wrap属性
前面提到，对于西方文字来说，浏览器在半角空格或连字符的地方进行换行。但是如果我们需要在一个较小的窗口显示一个很长的 URL 地址时，由于 URL 地址中没有半角空格，所以浏览器会将 URL 视为一个很长的单词来显示。
在CSS 3中，使用 word-wrap 属性来实现长单词与 URL 地址的自动换行。属性值有：
normal：浏览器使用默认处理方式，只在允许的断字点换行；
word-break：可在长单词或 URL 地址内部进行换行。
如下示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea{
width: 200px;
height: 200px;
border: 1px solid #ccc;
word-wrap: normal;
/* word-wrap: break-word; */
}
</style>
</head>
<body>
<textarea>thisisaveryveryveryveryveryverylongword</textarea>
</body>
</html>
user-select属性
user-select 属性用于指定用户是否可通过拖拽鼠标来选取元素中的文字。属性值有：
auto：默认。如果浏览器允许，则可以选择文本；
none：禁止选取；
text：可以选取；
all：只能选取全部文字。单击选取文本，而不是双击。
如下所示，当设置为 none 时，用户无法用鼠标选取这段文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #ccc;
user-select:none;
}
</style>
</head>
<body>
<div>用户</div>
</body>
</html>
@font-face属性
在 CSS3 之前，页面文字所使用的字体必须已经在客户端中被安装才能正常显示。
为了解决这个问题，在 CSS3 中，新增了 Web Fonts 功能，使用这个功能，网页中可以使用安装在服务器端的字体，只要某个字体在服务器端已经安装，网页中就都能够正常显示了。
它的使用如下。
@font-face {
font-family: WebFont;
src: url(sansation_light.woff) format("opentype");
font-weight: normal;
}
在这段代码中，
- font-family：声明使用服务器端的字体，这里是 WebFont，名字自取；
- src：指定服务器端该字体的字体文件所在的路径。在 format 属性值中声明字体文件的格式，可以省略声明格式；可以使用的文件格式有两种：
- OpenType：文件扩展名为“.otf”；
- TrueType：文件扩展名为“.ttf”；
- 在 Internet Explorer 浏览器中使用服务器端字体时，只能使用微软自带的 Embedded OpenType 字体文件，文件扩展名为“.eot”；
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: WebFont;
src: url('/css3/webfont/Diavlo_BOOK_II_37.otf') format("opentype");
}
#div2 {
font-family: WebFont;
}
</style>
</head>
<body>
<div id="div1">the new clothes</div>
<div id="div2">the new clothes</div>
</body>
</html>
应用不同的字体样式
在使用服务器端字体的时候，需要根据是斜体还是粗体，使用不同的字体文件。示例如下：
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: WebFont;
src: url('/css3/webfont/Fontin_Sans_R_45b.otf') format("opentype");
}
/* 定义斜体 */
@font-face {
font-family: WebFont;
src: url('/css3/webfont/Fontin_Sans_I_45b.otf') format("opentype");
}
/* 定义粗体 */
@font-face{
font-family: WebFont;
font-weight: bold;
src: url('/css3/webfont/Fontin_Sans_B_45b.otf') format("opentype");
}
#div2 {
font-family: WebFont;
font-style: italic;
font-weight: normal;
}
#div3{
font-family: WebFont;
font-weight: bold;
}
</style>
</head>
<body>
<div id="div1">the new clothes 浏览器默认</div>
<div id="div2">the new clothes 斜体</div>
<div id="div3">the new clothes 粗体</div>
</body>
</html>
在 @font-face 属性中，可以指定的属性值如下表所示。
使用本地字体
@font-face 属性不仅可以用于显示服务器端的字体，也可以用来显示客户端本地的字体。只需将 src 属性的 URL 修改成 “local()” 形式即可。
:::info 使用 @font-face 属性显示客户端本地字体的好处是可以让浏览器在对字体进行显示时，首先在客户端本地寻找是否存在该字体，当客户端寻找不到时可以使用服务器端的字体。 :::
font-size-adjust属性
有时，如果改变了字体的种类，则页面中所有使用该字体的文字大小都可能发生变化，从而使得原来安排好的页面布局产生混乱，这是网页设计者最不希望发生的一种状况。
在 CSS3 中，针对这种情况，增加了 font-size-adjust 属性。使用这个属性，可以在保持文字大小不发生变化的情况下改变字体的种类。
font-size-adjust 属性的使用方法很简单，但是它需要使用每个字体种类自带的一个 aspect 值（比例值）。使用方法类似如下所示。
div {
font-size: 14px;
font-size-adjust: 0.46;
font-family: Times New Roman;
}
这个 aspect 值的计算方法为 x-height 值除以该字体的尺寸，x-height 值是指使用这个字体书写出来的小写 x 的高度（像素为单位）。例如，如果某个字体的尺寸为 100px 时，x-height 值为 58 像素，则该字体的 aspect 值为0.58。
浏览器对于aspect值的计算方法
在 font-size-adjust 属性中指定 aspect 值并且将字体修改为其他字体后，浏览器对于修改后的字体尺寸的计算公式如下所示。
c = (a/b)s
例如，如果想将 16px 的 Times New Roman 字体修改为 Comic Sans MS 字体，字体大小仍然保持 16px 的 Times New Roman 字体的大小，则需要执行如下步骤：
- 查得 Times New Roman 字体的 aspect 值为 0.46；
- 查得 Comic Sans MS 字体的 aspect 值为 0.54；
- 将 0.54 除以 0.46 后得到近似值 1.17；
- 因为需要让浏览器实际显示的字体尺寸为 16px，所以将 16 除以 1.17，得出大约 14px，然后在样式中指定字体尺寸为 14px。也就是说，14px 的 Comic Sans MS 相当于 16px 的 Times New Roman 字体。
使用rem单位定义字体大小
rem 字体尺寸单位将根据页面上的根元素（一般指 html 元素）的字体大小而计算出实际的字体大小，em 单位根据元素的父元素的字体大小而计算出实际的字体大小。
在下例所示的 HTML 代码中，我们指定 html 元素的字体大小为 10px，small 元素的字体大小为 11px（10*1.1），strong 元素的字体大小为 18px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{font-size: 10px;}
#div1{font-size: 1.1rem;}
#div2{font-size: 1.8rem;}
</style>
</head>
<body>
<div id="div1">测试1</div>
<div id="div2">测试2</div>
</body>
</html>
在大多数浏览器中，默认字体大小为 16 个像素，针对默认字体大小来说，可以将根元素的字体大小指定为 62.5%，从而使浏览器自动计算出 10个像素。
html{font-size: 62.5%;}
#div1{font-size: 1.1rem;}
#div2{font-size: 1.8rem;}
效果同上。
to be continue…
若有收获，就点个赞吧
0 人点赞
