nuxt 引入第三方字体、艺术字效果

在assets文件夹内新建font文件夹，将字体文件(ttf等文件)放在assets/font文件夹内
在assets文件夹内新建css文件夹，然后css文件夹内新建font.css文件：

 @font-face {font-family: 'modeng';font-weight: normal;src: url('~assets/fonts/shetumodengxiaofangti.ttf') format('truetype');}.iconfont {font-family: 'modeng' !important;font-size: 16px;font-style: normal;}

assets文件夹内目录结构如下：

 ├── README.md├── css│   └── font.css└── fonts└── shetumodengxiaofangti.ttf

编辑nuxt.config.js：

   css: ["@/assets/css/font.css"]

使用：

 div {font-family: "modeng";}

效果

nuxt 引入第三方字体、艺术字效果相关推荐

在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
Swift 引入第三方字体库
引入第三方字体库为了达到好的效果展现,我们往往会引入第三方字体库,以使我们工程中的字体展示达到最佳,这方面可能对于阅读之类的APP会用到的更多. 在这里也是随便从网上下载的一个字体,名为经典隶书变体 ...
uniapp微信小程序引入第三方字体库
前言最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑这是uniapp官网的引入字体图标方法字体引入从c ...
微信小程序 - 引入第三方字体（使用网络字体艺术字）
前言有时候因项目需求,可能需要一套第三方艺术字体,就像如图所示效果(店内自取 / 外卖): 实现当然,也可以直接使用微信 API wx.loadFontFace ,具体请查看官方示例文档. 引入 ...
css引入第三方字体（等宽非衬线）
需求:是系统字体设置成等宽的,内置字体有等宽类型,但是却不美观:想要那种英文字体等宽的,数字不是衬线的,最后找到了Droid Sans Mono 很符合预期: 效果如下:等宽字体且对齐,数字0没有斜 ...
微信小程序 - 引入第三方字体（使用网络字体）
前言因项目需求,需要一套第三方字体,如下图所示效果(YC MEMBERSHIP SEASON CARD 和数字0): 实现 1.引入一套第三方字体(如上图所示的第三方字体). 2.在 App.vu ...
Vue引入第三方字体
下载第三方字体放在assets/font目录下再新建一个font.css @font-face {font-family: "TsangerYuYangT_W02_W02";sr ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
vue+elementui项目中引入第三方字体文件的方法示例
# 问题描述: vue中项目,发现相同页面在不同电脑上,字体显示效果不一致,例如:代码中设置了楷体,在某些电脑上显示不是楷体效果. # 解决方案: 1.先下载字体文件所需的.ttf文件(这不很重要,你 ...

nuxt 引入第三方字体、艺术字效果

nuxt 引入第三方字体、艺术字效果相关推荐

最新文章

热门文章