首页请通过代码演示@font-face的使用方法

请通过代码演示@font-face的使用方法

时间: 2024-10-11 15:06:05 浏览: 37

`@font-face` 是CSS3的一个特性，用于引入自定义字体到网页中，使得开发者可以直接使用非系统默认的字体。以下是一个简单的HTML和CSS示例，展示了如何使用`@font-face`： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: 'CustomFont'; /* 定义字体名称 */ src: url('path/to/font.ttf'); /* 指定字体文件路径 */ /* 或者其他格式，如.eot, .svg, .woff, .woff2 */ /* 注意替换为实际字体文件的URL */ font-weight: normal; font-style: normal; } body { font-family: 'CustomFont', Arial, sans-serif; /* 设置默认字体 */ } .custom-text { font-family: 'CustomFont'; } </style> </head> <body> <h1 class="custom-text">这是使用自定义字体的文本</h1> </body> </html> ``` 在这个例子中，首先我们在CSS中定义了一个`@font-face`规则，设置了字体名、来源以及可能的样式属性。然后，在`.custom-text`元素上应用了这个自定义字体。

阅读全文