文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS中怎么设置字体属性

2024-04-02 19:55

关注

CSS中怎么设置字体属性,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

CSS字体

CSS字体(font)属性定义文本中的字体。

设置CSS字体属性是样式表的最常见用途之一。CSS字体属性允许您设置字体系列(font-family)和字体加粗(font-weight),您还可以设置字体的大小、字体风格(如斜体)和字体变形(如小型大写字母)。

指定CSS字体

可以使用font-family属性在文档中采用某种字体系列。

使用通用CSS字体系列

如果你希望文档使用一种sans-serif字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:

body{font-family:sans-serif;}这样用户代理就会从sans-serif字体系列中选择一个字体(如Helvetica),并将其应用到body元素。因为有继承,这种字体选择还将应用到body元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。

指定CSS字体系列

除了指定通用的字体系列,您还可以通过font-family属性设置更具体的字体。

下面的例子为所有h2元素设置了Verdana字体:

h2{font-family:Georgia;}

这样的规则同时会产生另外一个问题,如果用户代理上没有安装Georgia字体,就只能使用用户代理的默认字体来显示h2元素。

我们可以通过结合特定字体名和通用字体系列来解决这个问题:

h2{font-family:Georgia,serif;}

如果读者没有安装Georgia,但安装了Times字体(serif字体系列中的一种字体),用户代理就可能对h2元素使用Times。尽管Times与Georgia并不完全匹配,但至少足够接近。

因此,我们建议在所有font-family规则中都提供一个通用CSS字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。

如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:

p{font-family:Times,TimesNR,'NewCenturySchoolbook',  Georgia,'NewYork',serif;}

根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的serif字体。

使用引号

您也许已经注意到了,上面的例子中使用了单引号。只有当一个CSS字体名中有一个或多个空格(比如NewYork),或者如果字体名包括#或$之类的符号,才需要在font-family声明中加引号。

单引号或双引号都可以接受。但是,如果把一个font-family属性放在HTML的style属性中,则需要使用该属性本身未使用的那种引号。

关于CSS中怎么设置字体属性问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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