CSS font-family 属性

CSS字体属性详解与实践
本文深入探讨了CSS font-family属性的用法、实例、浏览器支持情况及注意事项,提供了亲自尝试的机会,帮助开发者掌握如何为网页元素设置字体。

CSS font-family 属性

实例

为段落设置字体:

p
  {
  font-family:"Times New Roman",Georgia,Serif;
  }

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera
         

所有主流浏览器都支持 font-family 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

font-family 规定元素的字体系列。

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称:

  • 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
  • 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。

注意:使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。

默认值: not specified
继承性: yes
版本: CSS1
JavaScript 语法: object.style.fontFamily="arial,sans-serif"

可能的值

描述
  • family-name
  • generic-family

用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值:取决于浏览器。

inherit 规定应该从父元素继承字体系列。

TIY 实例

设置文本的字体
本例演示如何设置文本字体。

相关页面

CSS 教程:CSS 字体

CSS 参考手册:CSS font 属性

HTML DOM 参考手册:font 属性

CSS 中,`font-family` 属性用于定义文本的字体系列。开发者可以指定一个或多个字体名称作为备选方案,以确保在不同设备和系统中尽可能显示一致的视觉效果。以下是常用的 `font-family` 属性值列表及其分类。 ### 常见字体集合 #### 1. 衬线字体(Serif) 衬线字体通常具有装饰性的细小线条,常用于正式文档和印刷品中。 - `"Times New Roman"` - `"Georgia"` - `"Garamond"` #### 2. 非衬线字体(Sans-serif) 非衬线字体简洁现代,适用于屏幕显示。 - `"Arial"` - `"Helvetica"` - `"Roboto"` (Google Fonts) - `"Open Sans"` (Google Fonts) - `"Lato"` (Google Fonts) #### 3. 等宽字体(Monospace) 等宽字体每个字符占用相同的宽度,适合代码展示。 - `"Courier New"` - `"Consolas"` - `"Monaco"` #### 4. 幻想字体(Cursive/Fantasy) 这些字体通常用于特殊效果,风格独特且不常用。 - `"Comic Sans MS"`(Cursive) - `"Impact"`(Fantasy) #### 5. 中文字体 对于中文网页设计,以下字体是常用的: - `"微软雅黑"` (`Microsoft YaHei`) - `"黑体"` (`SimHei`) - `"楷体"` (`KaiTi`) - `"宋体"` (`SimSun`) - `"苹方"` (`PingFang SC`) —— 苹果系统推荐字体 - `"思源黑体"` (`Source Han Sans CN`) —— Adobe 和 Google 联合开发的开源字体 #### 6. 字体族通用名称(Generic FamilyCSS 提供了五种通用字体族名称,用于作为后备选项: - `serif` - `sans-serif` - `monospace` - `cursive` - `fantasy` ### 示例用法 ```css p { font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; } h1 { font-family: "Georgia", "Times New Roman", serif; } code { font-family: "Courier New", Courier, monospace; } ``` ### 自定义字体加载(使用 `@font-face`) 通过 `@font-face` 可以引入自定义字体文件,例如: ```css @font-face { font-family: 'MyCustomFont'; src: url('fonts/mycustomfont.woff2') format('woff2'), url('fonts/mycustomfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'MyCustomFont', sans-serif; } ``` 这种技术广泛用于加载如 [Google Fonts](https://fonts.google.com/)、[Adobe Fonts](https://fonts.adobe.com/) 或 [Font Awesome](https://fontawesome.com/) 等第三方字体资源[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值