vue 引用自定义eof、otf、在线字体的方法

最新推荐文章于 2023-11-10 18:24:49 发布

默唁

最新推荐文章于 2023-11-10 18:24:49 发布

阅读量621

点赞数 1

分类专栏： VUE 文章标签： css vue js

本文链接：https://blog.youkuaiyun.com/Mr_Chp/article/details/111888207

版权

VUE 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在Vue中引用自定义eof、otf及在线字体的方法，包括将字体文件放到项目目录，创建文件引入字体，在main.js中引入font.css，最后使用自定义字体，还给出了相关参考文章链接。

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

vue 引用自定义eof、otf、在线字体的方法

1.放到项目的 assets 目录中

2. 引入字体文件

首先创建一个 font.css 文件，引入字体。

在这里插入图片描述

/*电子LED字体 边框略微圆一点*/
@font-face {
    font-family: 'UnidreamLED';
    src:url(UnidreamLED.eot); /***兼容ie9***/
    src:url(UnidreamLED.eot?#iefix)format('embedded-opentype'), /***兼容ie6-ie8***/
    url('UnidreamLED.woff') format('woff'),
    local('UnidreamLED'), url("UnidreamLED.woff");/***默认使用本地的***/
}

/*电子LED字体 边框方正一点*/
@font-face {
    font-family: DigitalDismay;
    src: url(DigitalDismay.otf);
}

3.main.js中引入font.css

在这里插入图片描述

//引入字体样式
import './assets/font/font.css';

4.使用自定义字体

在这里插入图片描述

font-family: 'DigitalDismay';  /*自定义字体*/

文章参考：

1、https://www.jb51.net/article/160950.htm

2、https://fontmeme.com/ziti/digital-dismay-font/

3、css实现数字钟表字体实现 fonts