揭阳建设局网站,象58同城网站建设需要多少钱,建筑工找活哪个平台好,数字营销专业大学排名目录 1 介绍2 使用2.1 语法2.2 属性说明2.3 Vue使用案例2.3.1 全局定义字体2.3.2 在页面使用 3 注意事项 1 介绍
font-face 是 CSS 中的一个规则#xff0c;它允许你加载服务器上的字体文件#xff08;远程或者本地#xff09;#xff0c;并在网页中使用这些字体。这样font-face 是 CSS 中的一个规则它允许你加载服务器上的字体文件远程或者本地并在网页中使用这些字体。这样你可以使用非标准字体从而给网页带来独特的视觉风格。
2 使用
2.1 语法
font-face { font-family: MyCustomFont; src: url(myfont.woff2) format(woff2), url(myfont.woff) format(woff); font-weight: normal; font-style: normal;
}2.2 属性说明
font-family: 为自定义字体定义一个名称后续在 CSS 中使用这个名称来引用这个字体。src: 指定字体文件的 URL。你可以指定多个字体文件远程或者本地建议天秤本地地址更具可靠性浏览器会按照列出的顺序尝试加载。建议包含多种格式的字体文件以确保在各种浏览器上的兼容性。format: 指定字体文件的格式。这有助于浏览器确定如何解释文件。常见的格式包括 woff2, woff, ttf, eot, svg 等。font-weight 和 font-style: 这些属性定义了字体的粗细和样式如斜体。
其中format()描述符用于指定字体文件的格式。这对于浏览器来说是非常重要的因为它可以帮助浏览器正确地解析和加载字体文件。不同的浏览器可能支持不同的字体格式因此提供多种格式可以确保更广泛的浏览器兼容性。
以下是format()描述符中常用的一些字体格式及其简要说明
woff2 WOFF 2.0 是 WOFFWeb Open Font Format的更新版本它提供了更好的压缩和更广泛的浏览器支持。它是目前推荐的字体格式因为它提供了优秀的压缩效果并且被现代浏览器广泛支持。 woff WOFFWeb Open Font Format是专为网页设计的字体格式。它提供了良好的压缩效果并且与多种浏览器兼容。如果不需要woff2格式woff是一个很好的备选方案。 truetype (或 ttf) TrueType是一种广泛使用的字体格式它支持高质量的字体渲染。然而TrueType字体文件通常较大不如woff或woff2压缩效果好。在某些情况下特别是当其他格式不可用时可以使用TrueType。 opentype (或 otf) OpenType是另一种广泛使用的字体格式它支持多种字符集和丰富的字体特性。与TrueType类似OpenType字体文件也可能较大。 svg SVGScalable Vector Graphics字体是基于矢量的这意味着它们可以缩放到任何大小而不会失去清晰度。然而SVG字体通常比其他格式更大并且不如其他格式常用。它们主要在老版本的浏览器中用于支持某些特殊字符集。 eot EOTEmbedded OpenType是微软开发的一种字体格式主要用于旧版本的Internet Explorer浏览器。随着Internet Explorer的使用率下降EOT的需求也在减少。 bitmap formats (如 png, gif) 位图字体通常不是通过font-face加载的因为它们是基于像素的不支持缩放。它们主要用于特定的情况如创建自定义图标字体。
在font-face规则中使用format()描述符时你应该列出所有你提供的字体格式以便浏览器进行兼容。浏览器会按照你列出的顺序尝试加载字体直到找到它支持的格式为止。
2.3 Vue使用案例
2.3.1 全局定义字体
在index.html进行字体定义以便全局都能访问到实际生产上不建议这么做加载会消耗资源这里我们定义两个字体
SourceHanSansCNKaiTi font-face {/* 思源黑体 */font-family: SourceHanSansCN; src: url(../src/assets/fonts/SourceHanSansCN-Regular.otf) format(otf), url(../src/assets/fonts/SourceHanSansCN-Regular.otf) format(woff2); font-weight: normal; font-style: normal; }font-face {/* 楷体 */font-family: KaiTi; src: url(../src/assets/fonts/KaiTi.ttf) format(otf);font-weight: normal; font-style: normal; }2.3.2 在页面使用
templatelabel classsiyuan零星可比炽日华字若珠玑句无瑕/labelbr /label classkaiti我是楷体/label
/template
script
export default {};
/script
style scoped
.siyuan {font-family: SourceHanSansCN, sans-serif;color: red;
}
.kaiti {font-family: KaiTi, sans-serif;color: green;
}
/style
效果如下
3 注意事项
字体文件可能会比较大因此加载它们可能会对页面加载速度产生影响。为了优化性能考虑使用字体压缩技术并只包含你实际需要的字符集。确保你有权使用你正在加载的字体。一些字体可能受到版权保护未经许可不得用于商业用途。测试你的字体在各种浏览器和设备上的兼容性。不同的浏览器和设备可能对不同的字体格式有不同的支持程度。
