css3---文字以及字体的相关样式

一、给文字添加阴影

　　1.1 text-shadow：横方向的length(也可以为负值) 纵方向的length(也可以为负值)  模糊半径length  颜色

　　如果参数颜色缺省，火狐和opera使用color属性的颜色，safari和chrome不支持该参数的缺省，因此不对阴影进行绘制

div{
    text-shadow:3px 6px 9px blue;
}

　　1.2 指定多重阴影

div{
    text-shadow:10px 10px 9px blue,
                20px 20px 9px red,
                30px 30px 9px green;
}

 二、让文本自动换行

　　2.1 浏览器默认的自动换行

　　　　英文的是在半角空格或者连字符的地方自动换行，但不会在掐断一个完整的单词；中文的是任何一个文字后面，如果含有标点符号，不允许标点位于行首，会把标点符号前面的一个字拽到下一行，然后后面紧跟那个标点符号

　　2.2 word-break属性

div{
    word-break:break-all;
}

 

word-break的取值	规则
normal	默认浏览器的换行规则
keep-all	只在半角空格或者连字符处换行
break-all	允许单词内换行，ie始终不允许标点位于行首，safari和chrome允许标点位于行首

 　　2.3 让长单词或者url地址自动换行---word-wrap属性

　　　　对于英文，浏览器默认只在半角空格或者连字符的地方进行换行，所以浏览器不会给较长的单词或者url换行，会出现滚动条，解决方案word-wrap属性取值break-word

 

div{
    word-wrap:break-word;
}

 

三、使用服务器端的字体

　　3.1 问题：网页上使用的字体，只有在客户端已经被安装了，才可以正常显示，否则要使用替代字体，如果替代字体该用户也没有安装，则不能正常显示

　　3.2 解决：Web Fonts网页可以使用安装在服务器端的字体，只要该服务器已经安装了该字体，不管客户端是否安装了都可以正常显示

　　3.3 实现细节：@font-face属性

@font-face{
    font-family:WebFonts;
    src:url('....otf') format('opentype');
/*opentype格式的文件扩展名为.otf，truetype格式的文件扩展名为.ttf*/
}

 

 

 　　3.4 浏览器兼容的问题--ieie只能使用微软自带的字体文件，扩展名为.eot，同时ie不要format属性

@font-face{
    font-family:BorderWeb;
    src:url('.../sss.eot');
}

 

四、修改字体类型，保持字体大小不变

　　4.1 问题：当改变了字体的font-family时，字体的大小也会跟着变化，会影响布局

　　4.2 font-size-adjust属性：可以在字体保持大小不变的情况下改变字体类型

　　4.3 原理：每种字体都自带一个aspect值(比例值)，该值的获取情况是x-height/font-size，即以这种字体写出来的小写x的高度除以字体的尺寸

　　　　例如Times New Roman字体的aspect值是0.46，Comic Sans MS字体的aspect值是0.54，二者分别以相同的font-size写一个x，一个高为0.46*font-size，一个高为0.54*font-size

　　　　因此如果想要二者大小一样，那么他们的font-size就不能一样

　　　　例如想将16px的Times New Roman字体----->Comic Sans MS字体，就小写x的高度，原本的高度是0.46*16px==0.54*font-size

　　　　----->Comic Sans MS字体的font-size为0.46*16px/0.54=13.63....即Comic Sans MS字体的font-size:14px

　　4.3 细节：

div#map_01{
    font-family:"Times New Roman", Times, serif;
    font-size:16px;
    font-size-adjust:0.46;
}
div#map_02{
    font-family:"Comic Sans MS", cursive;
    font-size:14px;
    font-size-adjust:0.54;
}
div#map_03{
    font-family:"Comic Sans MS", cursive;
    font-size:16px;
    font-size-adjust:0.54;
}