Vue3中引入外部自定义字体

免费下载字体：查询-字体分享录免费商用字体下载（中文字体、繁体字体、英文字体、日文字体、韩文字体），含有授权说明，不定期更新，诚信分享。https://ziti.fenxianglu.cn/query?obk=time&obv=desc

或者直接用windows自带的字体：

C:\Windows\Fonts

  将下载的ttf文件放到 src/assets/font 文件夹中

font.css:

@font-face {
    font-family: "Sunday April";
    src: url('Sunday April.ttf');
}
@font-face {
    /* 自定义的字体名车，调用该字体时使用 */
    font-family: "Smiley_Sans_Oblique_斜体";
    /* 引用字体包。.ttf后缀不区分大小写，用.TTF也可以 */
    src: url('Smiley_Sans_Oblique_斜体.ttf'); 
    font-weight: normal;
    font-style: normal;
}

 main.ts中引入：

import "@/assets/font/font.css";

测试：

 <h1 style="font-family: 'Smiley_Sans_Oblique_斜体'">test字体</h1>

 效果：

扫描二维码关注公众号，回复： 16437241 查看本文章

对于以下这些字体，可以直接在css中用，无需引入 ：

Chrome 支持的字体大全http://www.dve2.com/t/9