前端引入使用外部字体（.ttf）_前端ttf字体引用-CSDN博客

本文链接：https://blog.csdn.net/weixin_71291137/article/details/143515406

引言：

最近在做大屏的相关项目开发，在开发过程中我们总会遇到一些比较"标新立异"的字体样式，或者是有需求要改一些内容的字体，摆脱默认千篇一律的字体样式让人耳目一新。这里有一个非常简单的字体替换方案方法，今天就分享给大家！

方法：

首先我们先准备好下载好的字体文件，这里是一共165款字体样式，应该能满足绝大部分字体样式需求了（稍后会把文件分享出来）。

2. 这个 . ttf 文件打开是这样的，可以看到各个字体的样式和展示效果。

3. 我们要做的就是把需要的字体按需放到我们的项目文件夹内，我这里是vue，我暂且放在src/assets/fonts文件夹里（你可以创建这个文件夹）。

4. 在 CSS 文件中定义字体：在你的 CSS 文件或 Vue 组件的 <style> 标签中，使用 @font-face 规则来定义字体。例如：

@font-face {
  font-family: "myfontNum";
  src: url("../assets/fonts/myfontNum.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

//在组件中应用字体：使用定义的字体名称应用到你需要的元素上。例如：
.my-text {
  font-family: "myfontNum", sans-serif;
  font-weight: 100;
}

这样，你就可以在 Vue.js 项目中使用 .ttf 字体文件了。