CSS3文字与字体

给文字添加阴影—text-shadow属性

text-shadow使用方法

text-shadow: length length length color

前三个length分别指阴影离开文字的横方向距离、纵方向距离和阴影的模糊半径，color指阴影的颜色。

div {
    text-shadow: 5px 5px 5px green;
    font-size: 50px;
}
<div>你好</div>

效果如图：

位移距离

text-shadow属性的参数中，前两个参数为阴影离开文字的横方向位移距离和纵方向位移距离。必须要指定这两个参数，可以对这两个参数指定负数值。

div {
    text-shadow: -15px 10px 5px green;
    font-size: 50px;
    margin-left:100px;
}

阴影的模糊半径

第三个参数是阴影的模糊半径，代表阴影向外模糊时的模糊范围。这个半径的值越大，则阴影向外模糊的范围也就越大。

div{
    text-shadow: 5px 5px 20px green;
    font-size: 50px;
}

模糊半径参数为可选参数，省略这个参数时，该参数默认为0，代表阴影不向外模糊。

阴影的颜色

第四个参数是绘制阴影时使用的颜色，该参数可以放在其他三个参数之前，也可放在其他三个参数之后。该参数为可选参数，不对这个参数指定时在CSS2中使用color属性中的颜色，也就是文字颜色。CSS3中使用浏览器指定的默认色。

指定多个阴影

可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。指定多个阴影时使用逗号将多个阴影进行分隔。

.div1{
    text-shadow: 5px 5px 5px,15px 15px 5px red,25px 25px 5px green;
    font-size: 40px;
}

让文本自动换行—word-break属性

浏览器的自动换行

浏览器本身都自带着让文本自动换行的功能。在浏览器中显示文本的时候，会让文本在浏览器或div元素的右端自动实现换行。对于字母，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的当中突然换行。对于中文来说，可以在任何一个中文字后面进行换行。
如果中文中含有字母，浏览器也会在半角空格或连字符的地方进行换行，而不会在单词中间强制换行。
当中文当中含有标点符号的时候，浏览器总是不可能让标点符号位于一行文字的行首，通常将标点符号以及它前面的一个文字作为一个整体来统一换行。

指定自动换行

可以使用word-break属性决定自动换行的处理方法。

.div1{ word-break: keep-all; }

word-break属性可以指定的值：

值 换行规则
normal 使用浏览器默认换行规则
keep-all 只能在半角空格或连字符处换行
break-all 允许在单词内换行

让长单词与URL地址自动换行—word-wrap属性

对于字母来说，浏览器在半角空格或连字符的地方进行换行。因此，浏览器不能给较长的单词自动换行。当浏览器窗口比较窄的时候，文字会超出浏览器的窗口，浏览器下部出现滚动条，让用户通过拖动滚动条的方法来查看没有在当前窗口显示的文字。
word-wrap属性可以实现长单词与URL地址的自动换行。

div{
    word-wrap: break-word;
}

word-wrap属性可以使用的属性值为normal与break-word。使用normal属性值时浏览器保持默认处理，只在半角空格或连字符的地方进行换行。使用break-word时浏览器可在长单词或URL地址内部进行换行。

使用服务器端字体—Web Font与@font-face属性

使用服务器端字体

可以使用@font-face属性来使用服务器端字体。

@font-face {
    font-family: WebFont;
    src: url('font/微软雅黑Light_1.0.ttc') format("opentype");
    font-weight: normal;
}

在font-family属性中使用WebFont来声明使用服务器端的字体。在src属性中指定服务器端字体的字体文件所在路径。在format属性中声明字体文件的格式，可以省略文件格式的声明而单独使用src属性值。
可以使用的文件格式为OpenType文件格式和TrueType文件格式，使用OpenType格式时将format属性值设定为opentype，使用TrueType格式时将format属性值设定为truetype，OpenType格式的文件扩展名为.otf，TrueType文件格式的扩展名为.ttf。
综合示例：

<style type="text/css">
@font-face{
    font-family: WebFont;
    src: url('Fontin_Sans_R_45b.otf') format("opentype");
    font-weight: normal;
}
h1{
    font-family: WebFont; 
    font-size: 60px;
    text-align: center;
    border: solid 1px #4488aa;
    margin: 20px;
    padding: 5px;
}
address{
    font-family: WebFont; 
    font-size: 14px;
    font-style: normal;
    text-align: center;
    margin: 20px;
    padding: 5px;
}
</style>
//HTML
<h1>Cascading Style Sheets</h1>
<address>
This page uses the 
<a href="http://www.josbuivenga.demon.nl/fontinsans.html">
Fontin Sans font by exljbris.
</a>
</address>

定义斜体或粗体字体

在定义字体的时候，可以将字体定义为斜体字或者粗体字。在使用服务器端字体的时候，需要根据是斜体还是租体，使用不同的字体文件。

<style type="text/css">
@font-face{
    font-family: WebFont;
    src: url('Fontin_Sans_R_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-style: italic;
    src: url('Fontin_Sans_I_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-weight: bold;
    src: url('Fontin_Sans_B_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-style: italic;
    font-weight: bold;
    src: url('Fontin_Sans_BI_45b.otf') format("opentype");
}
div{
    font-family: WebFont;
    font-size: 40px;
}
div#div1 {
    font-style: normal;
    font-weight: normal;
}
div#div2 {
    font-style: italic;
    font-weight: normal;
}
div#div3 {
    font-style: normal;
    font-weight: bold;
}
div#div4 {
    font-weight: bold;
    font-style: italic;
}
</style>
//HTML
<div id="div1">Text Sample1</div>
<div id="div2">Text Sample2</div>
<div id="div3">Text Sample3</div>
<div id="div4">Text Sample4</div>

显示客户端本地的字体

@font-face属性不仅可以用于显示服务器端的字体，也可以用来显示客户端本地的字体。需要将字体文件路径的URL属性值修改为local()形式的属性值，并且在local后面的括号中写入使用的字体。

@font-face{
    font-family: Arial;
    src: local('Arial');
}
@font-face {
    font-family: Arial;
    font-weight: bold;
    src: local('Arial Black');
}
div{
    font-family: Arial;
    font-size: 40px;
}
div#div1 {
    font-weight: normal;
}
div#div2 {
    font-weight: bold;
}
</style>
//HTML
<div id="div1">Text Sample1</div>
<div id="div2">Text Sample2</div>

使用@font-face属性显示客户端本地字体的好处是可以让浏览器在对字体进行显示时首先在客户端本地寻找是否存在该字体，当客户端寻找不到时可以使用服务器端的字体。

@font-face {
    font-family: HyHelvetica;
    src: local("Helvetica Neue"),
    url(HqOpenHodernaReqular.ttf);
}

属性值的指定

@font-face属性中可以指定的属性值：

属性值 说明 取值范围
font-family 设置字体系列的名称
font-style 设置字体的样式 normal：不使用斜体
italic：使用斜体
oblique：使用倾斜体
inherit：从父元素继承
font-variant 设置字体的大小写 normal：使用浏览器默认值
small-caps：使用小型大写字母
inherit：从父元素继承
font-weight 设置字体的粗细 normal：使用浏览器默认值
bold：使用粗体字符
bolder：使用更粗字符
lighter：使用更细字符
100~900：从细到粗定义字符，使用的值必须为100的整数倍，400等于normal，700等于bold
font-stretch 设置字体是否伸缩变形 normal：默认值，把缩放比例设为标准
wider：把伸缩比例设置为更进一步的伸展值
narrower：把收缩比例设置为更进一步的收缩值
ultra-condensed：字体缩放比例最宽的值
extra-condensed、condensed
semi-condensed、semi-expanded、expanded
extra-expanded
ultra-expanded：字体缩放比例最窄的值
font-size 设置字体大小
src 设置字体文件的路径

修改字体种类而保持字体尺寸不变一font-size-adjust属性

如果改变了字体的种类，则页面中所有使用该字体的文字大小都可能发生变化，从而使得原来安排好的页面布局产生混乱。
font-size-adjust属性可以在保持文字大小不发生变化的情况下改变字体的种类。

font-size-adjust属性的使用方法

它需要使用每个字体种类自带的一个aspect值(比例值)。
aspect值可以用来在将字体修改为其他字体时保持字体大小基本不变。这个aspect值的计算方法为x-height值除以该字体的尺寸，x-height值是指使用这个字体书写出来的小写x的高度(像素为单位)。如果某个字体的尺寸为100px时，x-height值为58像素，则该字体的aspect值为0.58 ，因为字体的x-height值总是随着字体的尺寸一起改变的，所以字体的aspect值都是一个常数。

div{
    font-size:16px;
    font-family:Times New Roman,
    font-size-adjust:0.46;
}

浏览器对于aspect值的计算万法

在font-size-adjust属性中指定aspect值并且将字体修改为其他字体后，浏览器对于修改后的字体尺寸的计算公式为：c = (a/b)s。
其中，a表示实际使用的字体的aspect值，b表示修改前字体的aspect值，s表示指定的字体尺寸，c为浏览器实际显示时的字体尺寸。
如果想将16px的Times New Roman字体修改为Comic Sans MS字体，字体大小仍然保持16px的Times New Roman字体的大小，则需要执行如下步骤：
1 )查得Times New Roman字体的aspect值为0.46，

  1. 查得Comic Sans MS字体的aspect值为0 .54，
  2. 将0.54除以0.46后得到近似值1.17,
  3. 因为需要让浏览器实际显示的字体尺寸为16px，所以将16除以1.17，得出大约14px，然后在样式中指定字体尺寸为14px。也就是说，14px的Comic Sans MS相当于16px的TimesNew Roman字体。

可以根据需要对aspect值进行微调以达到最满意的效果，也可以将font-size-adjust属性的属性值设为none，设定为none的意思等同于不对font-size-adjust属性进行设置，按照字体原来的大小显示。

<style type="text/css">
div#div1{
    font-size: 16px;
    font-family: Comic Sans MS;
    font-size-adjust:0.54;
}
div#div2{
    font-size: 14px;
    font-family: Times New Roman;
    font-size-adjust:0.46;
}
div#div3{
    font-size: 16px;
    font-family: Times New Roman;
    font-size-adjust:0.46;
}
</style>
//HTML
<div id="div1">
  It is fine today. Never change your plans because of the weather.
</div>
<div id="div2">
  It is fine today. Never change your plans because of the weather.
</div>
<div id="div3">
  It is fine today. Never change your plans because of the weather.
</div>
// 修改第二个div的样式
div#div2{
    font-size: 14px;
    font-family: Comic Sans MS;
    font-size-adjust:0.49;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 文字与字体相关样式
    一、给文字添加阴影 语法：length1—阴影离开文字横向方向的距离length2—阴影离开文字纵向方向的距离le...
    兔子不打地鼠打代码阅读 1,722评论 0赞 0
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,585评论 0赞 0
  • 02.CSS3文字与字体相关
    1.给文字添加阴影 text-shadow:length(横向模糊距离) length(纵向模糊距离) lengt...
    Ching_Lee阅读 1,183评论 0赞 0
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,958评论 1赞 45
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1赞 92