vue项目引入外部字体
1、UI设计图有"华文黑体",担心客户端没有该字体,将"huawen.ttf"字体文件,放入项目中:
2、创建一个font.scss(或font.css)文件:
@font-face {
font-family: 'huawen'; //重命名字体名
src: url('huawen.ttf'); //引入字体
font-weight: normal;
font-style: normal;
}
3、在main.js中引入
import '@/common/css/font.scss';
4、就可以直接使用了:
div {
font-family: 'huawen';
}
vue项目引入外部字体的更多相关文章
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- HTML引入外部字体
HTML5如何引入外部字体 背景 现在我需要 "Montserrat-ExtraLight ExtraLight"类型的字体,但是html的font-family中找不到这个类型的 ...
- vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...
- vue页面引入外部js文件遇到的问题
问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...
- css引入外部字体使网站字体更美观
@font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- vue项目引入element
前提工作-安装并配置好以下环境: 1.安装node 2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...
- 【vue】vue项目引入 Element-UI
根据vue项目的搭建教程,接下来记录下如何在Vue-cli创建的项目中引入Element-UI. 1.安装直接用命令 (推荐) npm install element-ui 2.直接在根目录下的pac ...
- vue项目引入bootstrap正确姿势
vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...
随机推荐
- Mac item2常用快捷键
记录一下iterm 2 快捷键,用于备忘! 标签 新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 command + 左右方向键 切换全屏:co ...
- 【商业智能VS人工智能】
什么是智能? 从感觉到记忆到思维这一过程,称为“智慧”,智慧的结果就产生了行为和语言,将行为和语言的表达过程称为“能力”,两者合称“智能”,将感觉.去记.回忆.思维.语言.行为的整个过程称为智能过程, ...
- Access to the requested object is only available from the local network phpmyadmin
http://stackoverflow.com/questions/11999371/access-to-the-requested-object-is-only-available-from-th ...
- 大数据笔记(二十四)——Scala面向对象编程实例
===================== Scala语言的面向对象编程 ======================== 一.面向对象的基本概念:把数据和操作数据的方法放到一起,作为一个整体(类 c ...
- [LeetCode]-009-Palindrome_Number
Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...
- [LeetCode]-DataBase-Nth Highest Salary
Write a SQL query to get the nth highest salary from the Employee table. +----+--------+ | Id | Sala ...
- 实现Callable接口,并与Future结合使用
实现步骤: 创建 Callable 接口的实现类,并实现 call() 方法,该 call() 方法将作为线程执行体,并且有返回值. 创建 Callable 实现类的实例,使用 FutureTask ...
- iOS证书发布推送相关知识科普
账号种类 1.企业账号 299美刀 -- 可以自己发布App,不能发布到App Store 2.个人/公司账号 99美刀 -- 可以发布到App Store, 不可以自己发布不限安装数量的App 个人 ...
- LeetCode_509.斐波那契数
LeetCode-cn_509 509.斐波那契数 斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列.该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和.也就是: F(0) ...
- [论文笔记] Improving Head Pose Estimation with a Combined Loss and Bounding Box Margin Adjustment
Improving Head Pose Estimation with a Combined Loss and Bounding Box Margin Adjustment 简介 本文提出了一种网络结 ...