深入解析CSS3 @font-face 规则:自定义与网络字体全面指南
/* 定义自定义字体,指定字体文件的URL */
@font-face {
font-family: 'MyCustomFont';
src: url('./path/to/my-custom-font.woff2') format('woff2'), /* 最优先级 */
url('./path/to/my-custom-font.woff') format('woff'), /* 次优先级 */
url('./path/to/my-custom-font.ttf') format('truetype'); /* 最后的备选方案 */
}
/* 应用自定义字体 */
body {
font-family: 'MyCustomFont', sans-serif;
}
这段代码展示了如何使用@font-face
规则来定义一个自定义字体,并指定了不同格式的字体文件作为备选方案。这样用户的浏览器会自动选择支持的格式进行加载。同时,示例中展示了如何在body
标签上应用这个自定义字体,并提供了sans-serif
作为备用字体。这是一个简单而实用的自定义字体使用案例。
评论已关闭