vue中替换全局字体

阿吧阿巴阿巴

已于 2022-11-25 14:02:46 修改

阅读量4.1k

点赞数 3

文章标签： vue.js 前端 javascript

于 2022-10-08 16:21:38 首次发布

本文链接：https://blog.youkuaiyun.com/z750467878/article/details/127210688

版权

引子：工作中需要搭建一个页面，微软雅黑是不支持商用的，需要全局替换成其他字体。

文章目录

一、下载字体
二、引入字体
三、使用
- 1.在App.vue中
- 2.搜索font-family，看有没有被替换掉的字体，改过来

一、下载字体

百度搜索自行下载，这里推荐一个网站，下载可商用字体（这里选用思源字体）

字体库

下载好的字体文件如下：

二、引入字体

1.在项目资源目录下新建一个font文件夹，引入下载好的字体文件

在这里插入图片描述

2.编写css文件(这里是font.less)

在这里插入图片描述

3.引入到main.js

引入到main.js是为了方便局部调用

在这里插入图片描述

三、使用

1.在App.vue中

在这里插入图片描述

2.搜索font-family，看有没有被替换掉的字体，改过来

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿吧阿巴阿巴

关注关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3中使用外部字体

蜗牛~~

05-11

1342

在页面中使用，直接用font-family后面跟上你在font.css中定义的名称即可。或者问UI要，ui在设计图的时候也会下载对应的特殊字体的包，所以问她要方便快捷 ~~在vue项目中的assets文件夹下，新建一个font文件夹，将这四个文件放进去。在官网的右上角输入你想下载的字体名称，点击后面的搜索按钮。然后再新建一个font.css文件，里面编写字体变量。首先要找一个免费网站，去下载你想用的字体，推荐。然后再main.js中引入font.css。下载完事之后再解压，是对应字体的四种类型。

Vue过滤器：替换文字的艺术

ByteNinja的博客

09-21

158

在Vue.js中，过滤器是一种非常有用的工具，用于对文本进行格式化和转换。在本文中，我们将探讨如何使用Vue过滤器来替换文字。我们将展示如何编写一个自定义过滤器，该过滤器可以接收一个字符串，并将其中的某些词汇替换为相似的意思。通过定义自己的过滤器和相应的逻辑，您可以根据自己的需求进行文本替换和格式化。在上面的示例中，我们使用了Vue.js的CDN链接来加载Vue.js库。首先，让我们创建一个Vue应用程序，并在其模板中使用过滤器。对象，其中包含了要替换的词汇和对应的替换词汇。最后，我们返回替换后的结果。

参与评论您还未登录，请先登录后发表或查看评论

Vue.js中全局替换字体及font-family的实践

weixin_62428445的博客

07-18

2146

首先，你需要将自定义字体文件（如.ttf.woff.woff2等格式）添加到项目的静态资源目录，通常是src/assets下。对于字体图标，如Font Awesome或Iconfont，你同样需要将图标库的字体文件添加到项目中，并在CSS中定义使用规则。

Vue3 导入全局字体

最新发布

一个处女座的CV工程师

03-12

478

【代码】Vue3 导入全局字体。

vue全局使用自定义字体

海阔天空

02-03

3488

vue全局使用自定义字体

Vue设置全局设置第三方字体

qq_38157433的博客

02-19

886

【代码】Vue设置全局设置第三方字体。

vue全局添加字体

LILEILEILOVE的博客

01-26

2189

1.在assets文件夹中创建fonts文件,放入ttf类型的文件 2.在assets文件夹中创建css文件。在css文件夹中创建fonts.css @font-face{ font-family:"DINALternateBold"; src:url("../fonts/DINALternateBold.ttf") } 3.在main.js中引入 import"@/assets/css/fonts.css" ...

在vue中更换字体,本地存储字体非引用在线字体库的方法

10-17

然后，在你的CSS样式文件（通常是`style.css`或`app.css`）中，定义全局字体样式，使用刚引入的字体： ```css body, h1, h2, h3, h4, h5, h6, p, button, input, textarea { font-family: 'your-font', sans-serif...

Vue修改全局样式 v-style指令详解

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-23

2269

通过上述示例和技巧，我们可以看到在 Vue 中动态设置样式是一个非常实用的功能，它可以帮助我们构建更加灵活和响应式的用户界面。在这种情况下，我们可以将样式定义在根元素上，并通过 Vue 的全局数据或组件实例来动态改变这些样式。在 Vue.js 的开发过程中，有时我们需要动态地修改全局样式或特定元素的样式，以适应不同的场景需求。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过这种方法，我们可以在运行时动态地修改元素的样式。

Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色

疑问搜索动手解决记录

12-08

1万+

一、前言其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , 想改动一下 , 于是来记录一下前段时间公司项目里需要实现一键换服 , 换主题颜色 , 网上看了一部分大多数都是用js获取标签元素添加Attribute , 如document.XXXXXXX ,或者是建theme.css文件什么的 , 不太符合我想要实现的用最少的代码实现换肤的功能 , 如果用了框架 , 还

全局vue中修改字体样式苹方字体微软雅黑亲测可用

qq_25007459的专栏

10-31

2万+

1、下载所需要的字体，.ttf格式本文以（PingFang.ttf 为例）底下将会附加苹果方体-简易黑体PINGFANG MEDIUM.tff 可自行下载其他字体样式，全局引用，方便快捷。 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'PingFang'; //重命名字体名 s...

vue项目实现换肤（样式、字体、背景）

王永存

11-09

1万+

后台管理项目一般都会加一些主题配色，最近在用vue写一个后台管理系统，也加了一个可以实时改变主题色彩。先看一下效果：项目的基色，可以通过颜色选择器进行更改： vue可以实现数据的双向绑定，要想所有的组件都使用可以实时改变的基色，思来想去还是vuex。 1、首先在vuex state里定义一个默认的主题颜色：（baseColor: '#2270e9'） 2、然后把这个state和颜...

vue项目设置全局字体样式font-family

热门推荐

海贼王某人的博客

02-05

3万+

直接在app.vue文件中加上一下代码即可，这是我收集的比较全的字体样式，从第一个向后找，系统有就默认显示第一个，依次往后找： <style lang="scss"> body { font-family:”Microsoft YaHei”,Arial,Helvetica,sans-serif,”宋体”; } </style> 你学废了吗！ ...

vue全局自定义字体，提高项目字体美化

在写作的路上持续输出。

03-09

5025

📢: 我们在项目开发时.或多或少会给项目添加全局字体; 添加字体的最佳方案,请看 👇 👇 👇 四步直接搞定

Vue的切换功能

jerisem的博客

04-23

3571

一、按钮文字之间的切换 <button @click="bol=!bol">{{ bol?'按钮一':'按钮二' }}</button> 然后在data中声明bol就可以 data: { bol: true } 实际效果如图：（单击按钮一会切换到按钮二）二、按钮切换其他的元素（使用v-if） <body> <div id="app"> <...

Vue+scss实现全局字体大小切换

weixin_46328739的博客

12-14

2861

【代码】Vue+scss实现全局字体大小切换。

vue+sass切换字体和主题

qq_36579455的博客

10-30

1339

文章目录前言一、Sass 中的 @mixin 与 @include1. @mixin 指令2. @include 指令二、Vue使用步骤1. 页面说明2. method说明三、Sass使用步骤(缺一不可)1. 定义变量2. @mixin3. @include【容易忽略的一步】主题的切换一. Vue使用步骤1. 页面说明2. method说明三、Sass使用步骤(缺一不可)1. 定义变量2. @mixin【这里以切换模态框背景色为例】3. @include【容易忽略的一步】总结前言本文根据Vue+s

vue3设置全局字体

12-22

在Vue3中设置全局字体通常是在项目的根组件或者CSS预处理器文件（如Sass、Less或Stylus）中进行。这里是一个基本的例子：首先，在`main.js`或`App.vue`的`<head>`部分添加全局CSS样式，你可以创建一个变量来存储字体名称和大小，例如： ```html <style lang="scss"> $global-font-family: 'Roboto', sans-serif; // 可替换为你喜欢的字体 body { font-family: $global-font-family; } </style> ``` 在上面的示例中，我们定义了一个名为`$global-font-family`的全局变量，并将其应用到了`body`元素上，使其所有子元素都会继承这个字体。如果你使用的是Vue CLI的scss-loader，记得安装相应的依赖： ```bash npm install --save node-sass sass-loader ``` 然后在`vue.config.js`中配置css预处理器： ```javascript module.exports = { css: { loaderOptions: { scss: { additionalData: ` @import "@/styles/variables"; `, }, }, }, }; ``` 在这个配置中，我们在`additionalData`里导入了包含全局变量的`variables.scss`文件。接着，在`variables.scss`中定义你的字体变量： ```scss // variables.scss $global-font-family: 'Arial', sans-serif; ``` 现在，项目内的所有Vue组件都将使用你指定的全局字体。如果你想在某个特定组件内改变字体，可以覆盖全局样式，如： ```html  <style scoped> .some-class { font-family: 'Comic Sans MS', sans-serif; } </style> ```