文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

这篇文章主要为大家展示了“css3中文字与字体相关的属性有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中文字与字体相关的属性有哪些”这篇文章吧。

  1text-shadow属性

  (1)功能

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

  (2)使用方法

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

  注意:

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

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

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

  (4)指定多个阴影

  text-shadow:10px10px#f39800,

  40px35px#fff100,

  70px60px#c0ff00;

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

  (3)浏览器支持

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

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

  2word-break属性

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

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

  (3)浏览器支持

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

  3word-wrap属性

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

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

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

  4WebFont与@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;

  }

  5font-size-adjust属性

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

  (2)使用方法:

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

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

  p{

  font-size:16px;

  font-famliy:TimesNewRoman;

  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中文字与字体相关的属性有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯