Vue导入下载的字体文件

问题描述

现在我正在实现一个页面，字体是比较特殊的TecentSans W7.ttf，无法直接使用css样式中对应的font-family去使用

解决方法

1.下载字体文件

首先需要下载你所需要的显示的特殊字体文件，注意后缀名为.ttf

2将ttf文件放入项目中

这里我是在assets文件夹下新建了一个font文件夹

3.定义font-family

再在font文件夹中新建index.css文件，定义font-family

@font-face {font-family: 'TencentSansw'; // 定义的字体名字src: url('./TencentSans\ W7.ttf');
// 对应的ttf文件路径
}

4.全局导入定义文件

在main.ts中导入css的声明文件

// 导入css字体样式
import '@/assets/font/index.css'

5.使用

直接使用

最后呈现效果

Vue导入下载的字体文件相关推荐

vue+python把woff字体文件中的字体全部读取出来
获取woff字体文件的字符编码 from fontTools.ttLib import TTFontfont = TTFont("7ef51293.woff") extraName ...
vue项目引入外部字体文件
1.在根目录的assets中新建fonts目录 /* // 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 */ @font-face {font-fami ...
vue导入非es6 js文件_Vue项目兼容IE11
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但对于 IE9+,Vue 底层是支持. 由于开发过程中,我们经常会使用一些第三方插件或组件 ...
vue前端下载本地excel文件
<a class="template-download" href="./存货周转率及存货金额目标录入模板.xlsx" download><i ...
Vue 项目导入字体文件
要想实现UI设计师设计的原型效果,有时候需要用到一些特殊的字体,在项目中就需要导入相关的字体文件.本文章以平方字体为例. 1.导入字体文件 1.下载相应的字体文件,或者找UI设计师要一份(如果UI设计 ...
【MAC苹果解决】软件字体和下载问题611308722文件
[装MAC字体出错结果系统字体变了?] 一.系统恢复 1.更换帐户 2.使用字体软件强制更换 3.也就是最简单的方法:系统工具-字体册-文件-恢复标准字体二.借助或删除.山狮系统是肯定有的,在字体册 ...
使用阿里图标库icon图标 ttf字体文件转化成base64格式
iconfont-阿里巴巴矢量图标库下载代码字体文件上传到下面网站 Online @font-face generator - Transfonter 下载转好的文件将以下代码复制到css 阿里 ...
C++解析IconFont矢量字体文件ttf，以及无锯齿显示矢量字体
一.下载矢量字体文件TTF 1.可以使用集成好的矢量字体,如FontAwesome.openwebicons.IcoMoon-Free.typicons-- 只要去搜索关键字,找到对应的官网即可下载到 ...
css引入本地字体文件,关于css中引入字体文件
关于css中引入字体文件 css样式代码: @font-face { font-family: Lovelo-Black;//定义font的名字 src: url(font/Lovelo Black. ...