如何在css文件中使用本地ttf/woff/woff2字体？

最新推荐文章于 2025-03-05 21:51:17 发布

星际碎片YLLKN

最新推荐文章于 2025-03-05 21:51:17 发布

阅读量5.8k

点赞数 2

分类专栏：前端技术文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_48577052/article/details/128957751

版权

前端技术专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在CSS文件中引用并使用本地的ttf、woff和woff2字体文件。首先下载字体，然后通过`@font-face`规则定义字体家族和路径，接着在CSS样式中应用这些自定义字体，最后在HTML或JS中创建元素并应用相应的CSS类来展示不同字体效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在css文件中使用本地ttf/woff/woff2字体？

1、首先下载ttf、woff、woff2字体文件

免费的字体文件可以上阿里矢量图库进行下载，不过数量很少。
在这里插入图片描述

2、在css文件中配置相应代码

@font-face { 
  font-family: 'myFont1'; 
  src: url('./myfont1.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face { 
  font-family: 'myFont2'; 
  src: url('./myfont2.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face { 
  font-family: 'myFont3'; 
  src: url('./myfont3.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

.hello1 {
  color: red;
  font-family: 'myFont1';
}
.hello2 {
  color: blue;
  font-family: 'myFont2';
}
.hello3 {
  color: pink;
  font-family: 'myFont3';
}

3、在js或html文件中使用css中的样式

import _ from 'lodash';
import './style.css';
 
function component() {
  const element1 = document.createElement('div');
  const element2 = document.createElement('div');
  const element3 = document.createElement('div');

  // Lodash, now imported by this script
  element1.innerHTML = _.join(['Hello', 'World'], ' ');
  element1.classList.add('hello1');
  element2.innerHTML = "Hello World";
  element2.classList.add('hello2');
  element3.innerHTML = "Hello World";
  element3.classList.add('hello3');

  element1.appendChild(element2);
  element1.appendChild(element3);

  return element1;
}

document.body.appendChild(component());