css3中文字与字体相关的属性有哪些

这篇文章主要为大家展示了“css3中文字与字体相关的属性有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css3中文字与字体相关的属性有哪些”这篇文章吧。

　　1text-shadow属性

　　（1）功能

　　给页面上的文字添加阴影效果。

　　（2）使用方法

　　text-shadow：lengthlengthlengthcolor（阴影离开文字的横方向距离、纵方向距离、阴影的模糊半径、阴影的颜色）

　　注意：

　　阴影离开文字的横方向距离、纵方向距离：必须指定，可指定负值。

　　阴影的模糊半径：代表阴影向外模糊时的模糊范围。这个半径值越大，则阴影向外模糊的范围也就越大。可选参数，省略时，默认为0，代表阴影不向外模糊。

　　阴影的颜色：可选参数，不指定时在CSS2中使用color属性的颜色（实际Firefox和Opera，其他不支持省略，省则不绘制），CSS3中使用浏览器指定的默认色。

　　（4）指定多个阴影

　　text-shadow：10px10px#f39800,

　　40px35px#fff100,

　　70px60px#c0ff00；

　　只有Chrome、Firefox、Opera浏览器支持该功能。

　　（3）浏览器支持

　　到目前为止：Safari、Chrome、Firefox、Opera浏览器支持该属性。

　　text-shadow：5px5px5pxgray;（灰色阴影，阴影离开分子的横纵方向均为5个像素）

　　2word-break属性

　　（1）功能：让文本自动换行

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

　　（3）浏览器支持

　　到目前为止：Safari、Chrome、IE浏览器支持该属性。

　　3word-wrap属性

　　（1）功能：让长单词和URL地址自动换行。

　　（2）值：normal（浏览器默认处理）、break-word（在长单词或URL地址内部进行换行）

　　（3）浏览器支持：所有浏览器。

　　4WebFont与@font-face属性

　　（1）功能：在网页上显示服务器端字体。

　　（2）使用方法：

　　@font-face{

　　font-famliy：WebFont；

　　src：url（‘font/Fontin_Sans_R_45b.otf’）format（“opentype”）；

　　font-weitht：normal；

　　}

　　h2{

　　font-family：WebFont；

　　}

　　5font-size-adjust属性

　　（1）功能：修改字体种类而保持字体尺寸不变

　　（2）使用方法：

　　aspect值（比例值）：可以用来在将字体修改为其他字体时保持字体大小基本不变。（常数）

　　计算方法：x-height值（使用该字体书写出来的小写X的高度（像素为单位））除以该字体的尺寸。

　　p{

　　font-size：16px；

　　font-famliy：TimesNewRoman；

　　font-size-adjust：0.46（aspect值）

　　}

　　（3）浏览器对于aspect值的计算方法：

　　在font-size-adjust属性中指定aspect值并且将字体修改为其他字体后，浏览器对于修改后字体尺寸的计算公式：

　　c=（a/b）s

　　a：表示实际使用的字体的aspect值、b：表示修改前字体的aspect值、

　　s：表示指定的字体尺寸，c：浏览器实际显示时的字体尺寸。

　　（4）属性值可设为：”none“

　　等同于不对font-size-adjust属性进行设置，按照字体原来的大小显示。

　　6使用rem单位定义字体大小

　　（1）rem字体尺寸单位根据页面上的根元素（一般指html元素）的字体大小而计算出实际的字体大小，不管元素的父元素的字体大小是多少。

　　html｛font-size：62.5%｝（大多数浏览器中，默认字体大小为16个像素，使用62.5%，使浏览器自动计算出10个像素）

　　small｛font-size：1.1rem；｝

　　strong｛font-size：1.8rem；｝

　　（2）浏览器支持:

　　到目前为止：包括IE9在内，所有浏览器都支持。

　　（3）兼容IE8及之前版本（不能使用rem字体单位）

　　html｛font-size：62.5%｝

　　small｛font-size：11px；font-size：1.1rem；｝

　　strong｛font-size：18px；font-size：1.8rem；｝

以上是“css3中文字与字体相关的属性有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！