CSS3自定义字体-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109148936

1. 在CSS3之前, web设计师必须使用已在用户计算机上安装好的字体。

2. 通过CSS3, web设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时, 可将该字体文件存放到web服务器上, 它会在需要时被自动下载到用户的计算机上。

3. 使用您需要的字体

3.1. 使用任意字体是在CSS3 @font-face规则中定义的。

3.2. 在新的@font-face规则中, 您必须首先定义字体的名称(比如: myFirstFont), 然后指向该字体文件。

3.3. 如需为html元素使用字体, 请通过font-family属性来引用字体的名称(myFirstFont):

@font-face {
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf'); 
}
p {
	font-family: myFirstFont;
}

4. 使用粗体字体

4.1. 您必须为粗体文本添加另一个包含描述符的@font-face:

@font-face {
	font-family: myFirstFont;
	src: url('Sansation_Bold.ttf');
	font-weight: bold;
}
span {
	font-family: myFirstFont;
	font-weight: bold;
}

4.2. 文件"Sansation_Bold.ttf"是另一个字体文件, 它包含了Sansation字体的粗体字符。

4.3. 只要font-family为"myFirstFont"的文本需要显示为粗体, 浏览器就会使用该字体。

5. CSS3字体描述符

6. 例子

6.1. 代码

<!DOCTYPE html>
	<html>
	<head>
		<title>CSS3 字体</title>
		<meta charset="utf-8" />

		<style type="text/css">
			@font-face {
				font-family: myFirstFont;
				src: url('Sansation_Light.ttf'); 
			}
			@font-face {
				font-family: myFirstFont;
				src: url('Sansation_Bold.ttf');
				font-weight: bold;
			}
			p {
				font-family: myFirstFont;
			}
			span {
				font-family: myFirstFont;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p>CSS3 使用font-face自定义字体。</p>
		<span>CSS3 使用font-face自定义粗体字体。</span>
	</body>
</html>

6.2. 效果图

042_CSS3字体