css3文字与字体的相关样式

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

text-shadow属性是css2中定义的，在css2.1中删除了，在css3中恢复text-shadow：length length length color；其中前三个length表示阴影离开文字的横方向距离，纵方向距离，和阴影的模糊半径，阴影的颜色。
前两个参数为阴影离开文字的距离可以为负值，负值代表向上，向左移动。颜色的参数不能省略，省略该参数则不会绘制阴影。
指定多个阴影，并且对多个，阴影可以使用不同的颜色，指定多个阴影时使用逗号将多个阴影隔开，但目前只有Firefox，chrome，opera支持。

[id=one]{ text-shadow:-5px -5px 2px #066; color:#0C6; font-size:50px;}

[id=two]{ text-shadow:-5px -5px 2px #066,75px 15px 2px #0FF,40px 40px 1px #C39; color:#0C6; font-size:50px;}

让文本自动换行——word-break属性
浏览器有让文字自动换行的功能，对于西方文字来说，浏览器会在半角空格或者连字符的地方自动换行，而不会再单词中间换行。
对于中文会在任意中文后换行。对于有标点符号的文章，浏览器不会让标点符号作为一行行首，因此会对标点前一个文字开始换行。
word-break属性的属性值有normal：使用浏览器默认的换行规则，keep-all：只能在半角空格内或连字符处换行， break-all：允许在单词内部换行。

[id=three]{ width:300px; height:300px; background-color:#0FF; color:#000; margin-top:70px; word-wrap:break-word;}

让长单词与URL地址自动换行——word-wrap属性
在css3中使用word-wrap来实现长单词与URL地址的自动换行。不自动换行可能会使长单词发生溢出。word-wrap:break-word;目前word-wrap属性得到所有的浏览器的支持

使用浏览器端字体——web Font与@font-face属性
在css3中，新增了web-Fonts功能，使用这个功能能使用服务器端字体，只要服务器安装此字体，网页就能正常浏览。
在css3 中可以使用@font-face来利用服务器端属性
@font-face{ font-family:webFont; src:url(服务器端字体的字体文件所在路径)format(声明字体文间的格式)}
@font-face也能显示客户端字体
@font-face的属性值有font-style，font-variant，font-weight，font-strech，font-size，src。

修改字体种类而保持字体大小不变的——font-size-adjust属性
font-size-adjust：aspect值；每一个字体的aspect的值不同。

使用rem单位来定义字体的大小
rem字体尺寸单位将根据页面的根元素（一般指html元素）的字体大小来计算实际字体的大小。无论子元素的父元素的大小是多大。
多了解一下rem的使用方法，响应式布局。

巴特西

css3文字与字体的相关样式

最新文章

热门文章