Vue中 引入外部字体并使用
注意：本文 vue-cli 版本：3.x， 4.x
1. 下载想要引入的字体的字体包；
2. 将要的字体放在资源目录下并创建一个 css 文件；
3. 在 font.css 文件中引入想要的字体；
// 这是 font.css 可设置多种字体；
// 注意：font-family: 'XXX'; 将字体名字自定义为 XXX,使用时要用这个名字@font-face {font-family: 'DigitalThick';src: url('./DigitalThick.ttf');
}
4. 在项目的 main.js 文件中引入写好的 font.css 文件；
import '@/assets/font/font.css';
5. 在 vue 组件中添加字体样式；
<template><div class="wrap"><div class="myfont">123456789</div></div>
</template><style lang="scss" scoped>
.myfont{font-family: 'DigitalThick'; // 这里的 DigitalThick 是引入时的自定义名字font-size: 35px;color: pink;
}
</style>
效果：
拓展：关于 font-family 相关知识
定义和用法：font-family 规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：
- 指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”；
- 通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”；
提示： 使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意： 使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
可能的值
| 值 | 描述 |
|---|---|
| family-name generic-family | 用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。 |
| inherit | 规定应该从父元素继承字体系列。 |
Vue中 引入外部字体并使用相关推荐
- 在新版Vue中引入外部字体
**第一步:**下载相应的ttf文件,如我下载的华文行楷字体 第二步添加响应的font-css文件 @font-face {font-family: "华文行楷";src: url ...
- Vue中引入外部字体
使用外部字体首先得有外部字体的包,要得到外部字体的包,无外乎两种途径,一种到付费网站去购买,另一种就是到免费网站下载字体包.收费的傻事我们能做?所以这里给大家上一个免费网址:DaFont.com,目前 ...
- 在vue中引入外部的css文件
在vue中引入外部的css文件 在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入 将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
- 项目开发中引入外部字体库
前端web项目 下载字体库(如:方正兰亭中黑_GBK.ttf) 全局引入 @font-face {font-family: "方正兰亭中黑_GBK";src: url(" ...
- 梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
- vue项目引入外部字体文件
1.在根目录的assets中新建fonts目录 /* // 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 */ @font-face {font-fami ...
- vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
- vue中引入外部文件js、css、img的方法
第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import ...
- html chrome中引入外部字体,强制Chrome在CSS中使用外部字体
您可以重命名CSS中的字体,仍然使用远程woff文件.例如: @font-face { font-family: 'RobotoBis'; font-style: normal; font-weigh ...
- vue实例中调用外部js_vue中引入外部js方法实例
我们在做vue项目时,经常会需要引入js,常用的有以下几种.本文主要和大家分享vue中引入外部js方法实例,希望能帮助到大家. 第一种import XX from "路径" Vue ...
最新文章
- 办公电脑变买为租，“企业惊变”背后神秘推手
- Batch Norm、Layer Norm、Instance Norm、Group Norm、Switchable Norm总结
- java提高篇(八)----详解内部类
- 7月的夏日北京必联网公司一行(图文)
- pytorch基础知识整理（四） 模型
- android 星级评论,Android自定义RatingBar(星级评分控件)
- android之视频直播与播放Vitamio
- Ubuntu15.10 安装JDK，配置环境变量, 解决无法登录的问题
- Unity中的单例方法
- 驱动拦截NT的API实现隐藏木马客户端
- 零基础学python难吗-学习python12小时后，告诉你，学python真没你想的那么难！
- 实现接口与显式实现接口的区别
- 飞机大战——图文详解
- 锂离子电池知多少——①正极材料
- 示波器的实时采样和等效采样
- java-阴历日期和阳历日期互相转换
- PHP 对接美团大众点评团购券(门票)
- 求真值表，主析取范式，主合取范式
- php项目排期表模板,最近在开发后台管理，想问下广告排期表怎么做？
- 程序员晒工资，工作 3 年被应届生倒挂！网友：工作 8 年被你倒挂！