CSS 引入字体

本文详细介绍了CSS中@font-face的使用,包括其特点、用法和属性解析,以及font-family的设置和应用。讲解了如何通过本地和网络方式引入字体,解决浏览器兼容性问题,并展示了如何引入不同格式的字体和系列字体,以实现丰富的字体效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

涉及知识

@font-face

@font-face 定义一个用于文本显示的自定义字体。详细内容可以参考 MDN文档

特点

  1. 可以自定义字体名称和与名称对应的字体文件
  2. 可以消除用户对电脑字体的依赖
  3. 可以用于字体图标的引入

用法

@font-face {
  font-family: "myFont";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: "normal";
  font-weight: 400;
}

属性解析

字体描述说明
font-familyname必需的。定义字体的名称。
srcURL必需的。定义该字体下载的网址或者文件路径
font-stretchnormal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded可选。定义该字体应该如何被拉长。默认值是"normal"
font-stylenormal italic oblique可选。定义该字体应该是怎样样式。默认值是"normal"
font-weightnormal bold 100 200 300 400 500 600 700 800 900可选。定义字体的粗细。默认值是"normal"

font-family

font-family 规定元素的字体系列。
简单来说,网页在渲染时,会按顺序尝试用 font-family 中规定的字体显示文字,如果第一个字体浏览器不支持或者找不到则会尝试下一个。

用法

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

简单应用

现在我们向 css 中引入一个自定义字体,并将其应用在元素上:

@font-face {
    font-family: 'HarmonyOS_Sans';
    src: url(/fonts/HarmonyOS_Sans/HarmonyOS_Sans_Thin.ttf);
    font-weight: 100;
}

.text {
    font-family: HarmonyOS_Sans;
}

更多应用

网络/本地引入

本地引入

当使用本地引入的方式引入字体时推荐使用相对路径,但是每当需要引入该字体时都需要计算相对地址,比较繁琐。
这里我建议将引入字体的 css 语句单独写到一个 css 文件中,然后将这个 css 文件放到字体文件同目录下,然后在公共 css 文件中引入这个 css 文件。

网络引入

注意这里使用的 Web fonts 仍然受到同域限制(字体文件必须和调用它的网页同一域),但可以使用 HTTP access controls 解除这一限制。

引入其他格式字体

首先补充一个知识:

什么是format属性?如何使用format属性?

format 属性是帮助浏览器识别字体的。浏览器是不能根据字体 url 后缀去自动识别字体格式的,所以使用 format 属性来帮助浏览器识别字体格式

字体格式如下:

  • trueType格式(.ttf) – Windows和Mac上常见的字体格式,是一种原始格式,因此它并没有为网页进行优化处理。 浏览器支持:IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
  • OpenType格式(.otf) – 以TrueType为基础,也是一种原始格式,但提供更多的功能。浏览器支持:FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
  • Web Open Font格式(.woff) – 针对网页进行特殊优化,因此是Web字体中最佳格式,它是一个开放的TrueType/OpenType的压缩版,同时支持元数据包的分离。浏览器支持:IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
  • Embedded Open Type格式(.eot) – IE专用字体格式,可以从TrueType格式创建此格式字体。 浏览器支持:IE4+
  • SVG格式(.svg) – 基于SVG字体渲染的格式。 浏览器支持:Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

为解决兼容性问题,Paul Irish 写了称为 Bulletproof 的一个独特的 @font-face 语法:

@font-face { 
	font-family: 'YourWebFontName'; 
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ 
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
	url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ 
	url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ 
	url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ 
}

其中 # 后面表示引用名称,类似于别名。因为不是所有格式都被浏览器识别,所以不识别的时候加上备用引用名称。

所以当引入字体时应该参考字体文件的格式和受众浏览器做相应的 format 处理。

引入系列字体

将各种粗细的同一个字体引入 css 。
操作如下:

@font-face {
    font-family: 'HarmonyOS_Sans';
    src: url(/fonts/HarmonyOS_Sans/HarmonyOS_Sans_Thin.ttf);
    font-weight: 100;
}

@font-face {
    font-family: 'HarmonyOS_Sans';
    src: url(/fonts/HarmonyOS_Sans/HarmonyOS_Sans_Light.ttf);
    font-weight: 200;
}


@font-face {
    font-family: 'HarmonyOS_Sans';
    src: url(/fonts/HarmonyOS_Sans/HarmonyOS_Sans_Regular.ttf);
    font-weight: 400;
}

font-family 相同,font-weight 不同的 @font-face 写多个。
如此一来在应用了该字体的元素上就可以通过 font-weight 属性进行调整字体粗细了。

font-weight 值解析:

描述
normal默认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
100 200 300 400 500 600 700 800 900定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit规定应该从父元素继承字体的粗细。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值