这篇文章主要为大家展示了“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中文字与字体相关的属性有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!