HTML.5 文字与字体相关样式

给文字添加阴影用text-shadow属性,语法:text-shadow:阴影离开文字的横方向距离 阴影离开文字的纵方向距离 阴影的模糊半径 阴影的颜色。如:text-shadow:length length length color;
具体:text-shadow:5px 5px 5px gray;
备注:阴影离开文字的横方向距离即text-shadow的第一个参数length,可以设置为负值,如上若为-5px,则阴影向左偏移,默认为正数时向右偏移,纵方向同理。
阴影的模糊半径,即text-shadow的第三个参数length,代表阴影向外模糊时的模糊范围,这个半径的值越大,则阴影向外模糊的范围就越大。
模糊半径为可选参数,省略这个参数时,该参数默认为0,代表阴影不向外模糊。
阴影的颜色即text-shadow的第四个参数,代表绘制阴影时所使用的颜色,为可选参数,通过实验发现在Firefox浏览器与Opera浏览器中使用color属性中的颜色,而在Safari浏览器及Chrome浏览器中不支持这个参数的省略,省略该参数时不会对阴影进行绘制。
可以指定多个阴影,可以针对每个阴影使用不同颜色,中间用逗号分隔开,但是目前只有Firefox浏览器、Chrome浏览器以及Opera浏览器支持该功能。

让文本自动换行,用word-break属性,使用word-break属性让文字自动换行,在CSS3中使用。word-break有三个值,normal(使用浏览器默认换行规则)、keep-all(只能在半角空格或连字符处换行)、break-all(允许在单词内换行)。

让长单词与URL地址自动换行,用word-wrap属性,在CSS3中用word-wrap:break-word;来实现长单词与URL地址的自动换行。它还有个属性值是normal,表示让浏览器保持默认处理。

使用服务器端字体,Web Font与@font-face属性
@font-face{
    font-family:WebFont; //表示 用来声明使用服务器端的字体
    src:url('font/Fontin_Sans_R_45b.oft') format('opentype');
}
//src属性的值指定服务器端字体的字体文件所在的路径,在format属性值中声明字体文件的格式,也可以省略文件格式的声明,单独使用src属性值。这里使用了免费的Fontin Sans字体,文件格式为OpenType格式。目前可以使用的字体文件格式有OpenType与TrueType。使用OpenType时将format属性值设定为opentype,使用TrueType时设定为truetype。OpenType格式的文件扩展名为.otf,TrueType文件格式的扩展名为.ttf。IE浏览器中只能使用微软自带的Embedded OpenType字体文件,文件扩展名为.eot,不需要format属性值。IE中使用服务端字体举例:
@font-face{
      font-family:BorderWeb;
      src:url(BORDERW0.eot);
}
针对元素使用服务器端字体时,需要在元素样式中将font-family属性值设定为WebFont,如下:
h1{font-family:WebFont;}

修改字体种类而保持字体尺寸不变,用font-size-adjust属性,用法如下:
div{
    font-size:16px;
    font-family:Times New Roman;
    font-size-adjust:0.46;//0.46为Times New Roman字体的aspect值。
}
aspect值可以用来在将字体修改为其他字体时保持字体大小基本不变。这个aspect值的计算方法为x-height值除以该字体的尺寸,x-height值是值使用这个字体书写出来的小写x的高度(像素单位)。如果某个字体的尺寸为100px时,x-height值为58px,则该字体的aspect值为0.58,。
浏览器对于aspect值的计算方法
c=(a/b)s;
a表示实际使用的字体的aspect值
b表示修改前字体的aspect值
s表示指定的字体尺寸
c为浏览器实际显示时的字体尺寸

发表评论
验证码: 点击我更换图片