vue项目中使用特殊字体

最近项目中需要使用一些特殊字体，字体的效果图如下：

这是一种名叫DINCond-Regular的字体，下面以此为例介绍一下在vue项目中如何使用特殊字体：

1、获取特殊字体文件

首先需要获取特殊字体的源文件，一般由视觉同学给我们提供，字体文件通常是以eot、otf、ttf、woff等作为后缀。对于DINCond-Regular字体，我们使用的是DINCond-Regular.otf文件；

2、对于使用vue-cli脚手架创建的项目，找到src/assets目录，新建一个名叫DINfont的文件夹用于存放特殊字体源文件；创建一个DINfont.css文件用于声明该特殊字体；对于自己手动创建的项目（不使用vue-cli脚手架），也可以通过在项目中创建assets目录，进行上述操作；对于vue-cli2或者vue-cli3创建的项目，脚手架自动帮我们在webpack中添加url-loader处理特殊字体文件，我们不用再处理，但是对于自己手动创建的项目，我们需手动在webpack配置中添加url-loader对字体文件的处理；

DINfont.css中特殊字体声明如下：

// DINfont.css
@font-face {font-family: 'din-regular';src: url('./DINfont/DINCond-Regular.otf') format('truetype');
}

3、特殊字体声明完后需要在项目中引入该样式文件，引入方式有两种，一种是全局引入，即在项目入口文件中引入，全局引入后在项目的任何地方都可以使用该特殊字体；另一种是局部引入，即只在需要使用该特殊字体的文件中引入。

全局引入：

在项目的入口文件main.js中全局引入字体样式

// main.js
import './assets/DINfont.css'

局部引入：

例如，在App.vue文件中需要使用该特殊字体，则在App.vue文件中引入

// App.vue
<template>...
</template>
<script>
...
import './assets/DINfont.css'
...
</script>
<style>
...
</style>

4、至此，vue项目中引入特殊字体的工作就完成了，接下来就可以直接使用了，如下：

<div id="app"><div>我是浏览器默认字体</div><div class="font">我是特殊字体DINCond-Regular 0000</div>
</div>

#app{font-size: 32px;
}
.font{font-family: 'din-regular';
}

效果如下：

vue项目中使用特殊字体相关推荐

在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
【自用】Vue项目中使用自定义字体样式
步骤一:拿到自定义字体包首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包. 步骤二:在项目文件夹中进行放置自定义字体包的配置在项 ...
vue项目中如何使用字体图标，简单清晰明了！
1.登录阿里巴巴图标库官网,创建一个自己的项目,并将对应的svg图片添加或上传到对应的项目中,如下图所示: 2.点击[下载至本地]按钮,将文件夹下载下来: 3.在项目中src/assets目录下创建一 ...
vue 项目中引入 .ttf 字体
开发中发现,UI设计图中的有些字体效果,需要引入字体文件才能生效.于是,就自己找了下方法,顺便记录下来. 1.下载需要的字体 .ttf 文件: 2.将字体文件放到 assets 文件夹中: 3.在当前 ...
在vue项目中添加特殊字体
这里的特殊字体,指的是一般用户电脑未安装到本地的字体,要引入这样的字体,首先需要把字体文件下载下来. 就像上图这样的,ttf格式的,然后在项目里添加它. 然后我们在font.css里用@font-fa ...
vue项目中导入icon字体文件出现This relative module was not found:* ./iconfont.eot?t=1523541245904
报错提示: This relative module was not found: *./iconfont.eot?t=1523541245904 in ./node_modules/css-load ...
在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
fabricJs 在vue项目中的实战记录（四）添加文字以及文字的操作[字体大小、颜色、字间距、行间距、透明度、加粗、斜体、下划线、删除线、对齐方式、字体设置]
在阅读以下文章的基础上查看本篇笔记: 第一篇:fabricJs 在vue项目中的实战记录(一)引入以及初始化第二篇:fabricJs 在vue项目中的实战记录(二)fabricjs设置海报背景(图片 ...

vue项目中使用特殊字体

vue项目中使用特殊字体

vue项目中使用特殊字体相关推荐

最新文章

热门文章