前端在vue项目静态文件夹下引入非默认字体并使用
将下载好的想要使用的字体放到项目的静态文件夹下
示例:
文件类似路径:
文件夹下内容(不同项目内容不同)
在目标页面或者全局引入的css页面声明并使用
代码:
@font-face {
font-family: "iconfont"; /* Project id 1782818 */
src: url('iconfont.woff2?t=1636125596282') format('woff2'),
url('iconfont.woff?t=1636125596282') format('woff'),
url('iconfont.ttf?t=1636125596282') format('truetype');
}分析:
在CSS中的 @font-face 规则中，format() 函数用于指定字体文件的格式。这段代码的作用是告诉浏览器当前字体文件的类型。具体来说：
url(): 指定字体文件的URL路径。format(): 指定字体文件的具体格式。
format('truetype'): 表示这个字体文件是TrueType字体格式（可以省略）。
-
常见的字体格式
woff2: Web Open Font Format 2.0，是一种高效的字体格式，广泛支持。woff: Web Open Font Format 1.0，也是一种常见的字体格式。truetype: TrueType字体格式，适用于大多数操作系统。opentype: OpenType字体格式，与TrueType兼容。svg: Scalable Vector Graphics字体格式，较少使用。