四、文字与字体相关样式

acac242083

于 2018-06-05 07:28:00 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/LLMjiayou7/p/9137822.html

版权

css3中与文字、字体相关的属性有text-shadow、word-break、word-wrap、Web-font、font-face和font-size-adjust属性。

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

用法：text-shadow:lengtn length length color;

前三个length分别指阴影离开文字横方向距离、阴影离开文字的纵方向距离和阴影模糊的半径，这里的length可以是负数，color指阴影的颜色，使用时当不指定阴影颜色时，在safari与chrome中不支持这个参数的省略，否则将不会对阴影进行复制。也可以使用text-shadow指定多个阴影，并且针对每个阴影使用不同的颜色指定多个阴影时使用逗号将多个阴影进行分割，Firefox、Chrome、opera都支持这个功能。

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

word-break:normal 使用浏览器默认换行规则

word-break:keep-all 只能在半角空格或连字符处换行，safari 3和Crome6不支持

word-break:break-all 允许在单词内换行，在IE中不允许标点符号位于行首

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

对西方文字来说，浏览器在半角空格或连字符的地方进行换行。因此浏览器不能给较长的单词自动换行。当浏览器窗口比较窄的时候，文字会超出浏览器的窗口，浏览器下部出现滚动条。但是，这种比较长的单词出现的机会不是很大，而大多数超出的浏览器窗口的是出现在显示较长的url地址的时候。

word-wrap:break-word

word-wrap:normal

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

在css3之前，页面文字所使用的字体必须是已经在客户端被安装才会被正常显示，因此在css3中新增了web-font功能，只要某个字体在服务器端已经安装，网页中就可以正常显示。

1、在网页上显示服务器端的字体，在css3中，可以使用@font-face属性来利用服务器端字体。

@font-face{
    font-family: WebFont;  /*声明使用服务器端的字体*/
    src:url('font/Fontin_Sans_R_45b.otf') format("opentype");  /*src指定服务器端字体的文件路径，在format属性中声明字体文件的格式*/
}

在IE中，只能用微软自带的embedded opentype字体文件，文件扩展名为“.eot”，同时不需要format属性。

在针对元素使用这个服务器字体时，还需要在元素样式中将font-family属性值指定为WebFont。

2、定义斜体和粗体字体

font-style

3、显示客户端本地的字体

@font-face{
    font-family: Arial;  
    src:local("Arial") url('font/Fontin_Sans_R_45b.otf') format("opentype");  /*local()形式的属性值显示客户端本地的字体，src指定服务器端字体的文件路径，在format属性中声明字体文件的格式*/
}

使用本地字体的好处是，可以让浏览器在对字体显示时首先在本地寻找是否存在该字体，当本地不存在时再使用服务器上的字体。

属性值的指定

font-family：设置系列的名称

font-style：设置字体的样式，normal不使用斜体，italic使用斜体，oblique使用倾斜体，inherit从父元素继承

font-variant：设置字体的大小写

font-weight：设置字体的粗细

font-stretch：设置字体是否伸缩变形

font-size：设置字体大小

src：设置字体文件路径

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

如果改变了字体的种类，则页面中所有使用该字体的文字大小都可能发生变化，从而使原来排好的页面布局产生混乱，这时网页设计者不愿看到的。因此这里用到了font-size-adjust，该属性需要用到每个字体种类自带的aspect值（比例值），关于浏览器对于aspect值的计算方法这里不做赘述，可以自己查看相应的资料。

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

在css3中，现在可以使用rem单位来定义字体的大小，rem字体尺寸单位将根据页面上的跟元素（一般值html元素）的字体大小计算出实际的字体大小，这里说下em单位，em单位是根据元素的父元素的字体大小计算出字体的实际大小，因此，当我们把一个父元素移动到另一个父元素中时很可能使元素的字体大小发生改变。除了em单位外，我们通常也使用px（像素）单位来指定字体的大小。但是今天由于web网站与web应用程序可以在各种移动设备的浏览器中，所以我们应该意识到我们的页面可能出现在各种尺寸的屏幕上，如果只依靠像素来指定字体的大小，我们可能根据各种尺寸的屏幕来给元素设置各种尺寸的字体，这时一件很恼火的事。因此，我们需要使用rem单位，目前为止所有浏览器（除了IE8之前）都支持rem，一般浏览器的默认字体像素为16px。

转载于:https://www.cnblogs.com/LLMjiayou7/p/9137822.html