css3---文字以及字体的相关样式
2013-05-18 20:26
381 查看
一、给文字添加阴影
1.1 text-shadow:横方向的length(也可以为负值) 纵方向的length(也可以为负值) 模糊半径length 颜色
如果参数颜色缺省,火狐和opera使用color属性的颜色,safari和chrome不支持该参数的缺省,因此不对阴影进行绘制
1.2 指定多重阴影
二、让文本自动换行
2.1 浏览器默认的自动换行
英文的是在半角空格或者连字符的地方自动换行,但不会在掐断一个完整的单词;中文的是任何一个文字后面,如果含有标点符号,不允许标点位于行首,会把标点符号前面的一个字拽到下一行,然后后面紧跟那个标点符号
2.2 word-break属性
2.3 让长单词或者url地址自动换行---word-wrap属性
对于英文,浏览器默认只在半角空格或者连字符的地方进行换行,所以浏览器不会给较长的单词或者url换行,会出现滚动条,解决方案word-wrap属性取值break-word
三、使用服务器端的字体
3.1 问题:网页上使用的字体,只有在客户端已经被安装了,才可以正常显示,否则要使用替代字体,如果替代字体该用户也没有安装,则不能正常显示
3.2 解决:Web Fonts网页可以使用安装在服务器端的字体,只要该服务器已经安装了该字体,不管客户端是否安装了都可以正常显示
3.3 实现细节:@font-face属性
3.4 浏览器兼容的问题--ieie只能使用微软自带的字体文件,扩展名为.eot,同时ie不要format属性
四、修改字体类型,保持字体大小不变
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 细节:
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允许标点位于行首 |
对于英文,浏览器默认只在半角空格或者连字符的地方进行换行,所以浏览器不会给较长的单词或者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; }
相关文章推荐
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
- CSS3之文字与字体相关样式
- CSS3文字与字体相关样式
- HTML5第一阶段(第十二章css3选择器&文字与字体相关样式)
- CSS3文字与字体相关样式
- CSS3系列二(媒体支持、文字与字体相关样式、盒相关样式)
- CSS3学习(五)字体相关样式
- css3 - 文字相关样式
- css3文字与字体样式
- CSS3--字体样式,自动隐藏一行中多余文字,以省略号显示。
- CSS3之文字与文体相关样式
- CSS3系列三(与背景边框相关样式 、变形处理、动画效果)
- Struts2的国际化文件配置样式以及中文字体设置
- css 标题 一行图片 两行文字 以及相关问题处理
- css文字与字体相关
- 几个常用的CSS3样式代码以及不兼容的解决办法
- html自学笔记(css3字体以及动画)
- CSS3背景与边框相关样式
- 更改UILabel的字体样式及某段文字中的颜色