文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

css如何使用font-family 属性定义文本的字体系列

2024-04-02 19:55

关注

这篇文章主要介绍css如何使用font-family 属性定义文本的字体系列,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

使用普片字琐屑列

假设你祈望文档使用一种 sans-serif 字体,可是你其实不关心是哪种字体,下列便是一个合乎的申明:

body {font-family: sans-serif;}

亲身试一试

何等用户代理就会从 sans-serif 字细碎列入抉择一个字体(如 Helvetica),并将其使用到 body 元素。因为有秉持,这种字体抉择还将应用到 body 元素中席卷的悉数元素,除非有一种更特定的选择器将其笼盖。

指定字体系列

除了使用通用的字细碎列,您还可以经过 font-family 属性配置更具体的字体。

下面的例子为全数 h2 元素设置装备摆设了 Georgia 字体:

h2 {font-family: Georgia;}

亲身试一试

何等的规定同时会制作生其他一个题目,假设用户代理上不有安装 Georgia 字体,就只能使用用户署理的默许字体来显示 h2 元素。

咱们可以经过拉拢特定字体名和通用字琐屑列来打算这个问题:

h2 {font-family: Georgia, serif;}

切身试一试

假如读者不有安装 Georgia,但安设了 Times 字体(serif 字琐细列中的一种字体),用户署理便可能对 h2 元素使用 Times。固然 Times 与 Georgia 并不彻底成婚,但最多十足接近。

于是,咱们提倡在一切 font-family 划定规矩中都供给一个普片字系统列。多么就供应了一条后路,在用户代办署理无法供给与规定成婚的特定字体时,便可以选择一个候选字体。

要是您对字体非常明确,也可认为给定的元素指定一系列类似的字体。要做到这一点,重要把这些字体根据优先轨范布列,日后用逗号发展连贯:

p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

亲身试一试

根据这个列表,用户代搭理按所列的倒叙查找这些字体。要是列出的全数字体都不成用,就会容易地决定一种可用的 serif 字体。

使用引号

您也许也曾留神到了,下面的例子中使用了单引号。只需当字体名中有一个或多个空格(比如 New York),或者要是字体名包括 # 或 $ 之类的符号,才必要在 font-family 声明中加引号。

单引号或双引号均可以接受。然则,如果把一个 font-family 属性放在 HTML 的 style 属性中,则须要使用该属性本人未使用的那种引号:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

以上是“css如何使用font-family 属性定义文本的字体系列”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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