网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

css3中有哪些文字与字体相关的属性

这篇文章将为大家详细讲解有关css3中有哪些文字与字体相关的属性,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

站在用户的角度思考问题,与客户深入沟通,找到新野网站设计与新野网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、成都做网站、外贸网站建设、企业官网、英文网站、手机端网站、网站推广、域名注册网站空间、企业邮箱。业务覆盖新野地区。

1 text-shadow属性

(1)功能

给页面上的文字添加阴影效果。

(2)使用方法

text-shadow:length length length color (阴影离开文字的横方向距离、纵方向距离、阴影的模糊半径、阴影的颜色)

注意:

阴影离开文字的横方向距离、纵方向距离:必须指定,可指定负值。

阴影的模糊半径:代表阴影向外模糊时的模糊范围。这个半径值越大,则阴影向外模糊的范围也就越大。可选参数,省略时,默认为0,代表阴影不向外模糊。

阴影的颜色:可选参数,不指定时在CSS2中使用color属性的颜色(实际Firefox和Opera,其他不支持省略,省则不绘制),CSS3中使用浏览器指定的默认色。

(4)指定多个阴影

text-shadow:10px 10px #f39800,
                         40px 35px #fff100,
                        70px  60px #c0ff00;

只有Chrome 、Firefox、Opera浏览器支持该功能。

(3)浏览器支持

到目前为止:Safari、Chrome 、Firefox、Opera浏览器支持该属性。

text-shadow:5px 5px 5px gray;(灰色阴影,阴影离开分子的横纵方向均为5个像素)

2 word-break属性

(1)功能:让文本自动换行

(2)值:normal(使用浏览器默认换行规则)、keep-all(只能在半角空格或连字符处换行)、break-all(允许在单词内换行)

(3)浏览器支持

到目前为止:Safari、Chrome 、IE浏览器支持该属性。

3 word-wrap属性

(1)功能:让长单词和URL地址自动换行。

(2)值:normal(浏览器默认处理)、break-word(在长单词或URL地址内部进行换行)

(3)浏览器支持:所有浏览器。

4 Web Font与@font-face属性

(1)功能:在网页上显示服务器端字体。

(2)使用方法:

@font-face{
    font-famliy:WebFont;
    src:url(‘font/Fontin_Sans_R_45b.otf’)  format(“opentype”);
   font-weitht:normal;
}
h2{
    font-family:WebFont;
}

5 font-size-adjust属性

(1)功能:修改字体种类而保持字体尺寸不变

(2)使用方法:

aspect值(比例值):可以用来在将字体修改为其他字体时保持字体大小基本不变。(常数)

计算方法:x-height值(使用该字体书写出来的小写X的高度(像素为单位))除以该字体的尺寸。

p{
   font-size:16px;
   font-famliy:Times New Roman;
   font-size-adjust:0.46(aspect值)
}

(3)浏览器对于aspect值的计算方法:

在font-size-adjust属性中指定aspect值并且将字体修改为其他字体后,浏览器对于修改后字体尺寸的计算公式:

c = (a / b)s

a:表示实际使用的字体的aspect值、b:表示修改前字体的aspect值、

s:表示指定的字体尺寸,c:浏览器实际显示时的字体尺寸。

(4)属性值可设为:”none“

等同于不对font-size-adjust属性进行设置,按照字体原来的大小显示。

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

(1)rem字体尺寸单位根据页面上的根元素(一般指html元素)的字体大小而计算出实际的字体大小,不管元素的父元素的字体大小是多少。

html{font-size:62.5%}(大多数浏览器中,默认字体大小为16个像素,使用62.5%, 使浏览器自动计算出10个像素)
small{font-size:1.1rem;}
strong{font-size:1.8rem;}

(2)浏览器支持:

到目前为止:包括IE9在内,所有浏览器都支持。

(3)兼容IE8及之前版本(不能使用rem字体单位)

html{font-size:62.5%}
small{font-size:11px;font-size:1.1rem;}
strong{font-size:18px;font-size:1.8rem;}

关于css3中有哪些文字与字体相关的属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享标题:css3中有哪些文字与字体相关的属性
网址分享:http://bjjierui.cn/article/pjhpgg.html

其他资讯