vue项目修改字体为苹方

原创已于 2024-01-03 12:20:36 修改 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-11-14 17:21:34 首次发布

本文介绍了如何在Vue项目中，通过在assets文件夹下创建字体文件和CSS文件，以及在app.vue的全局样式中导入并设置body字体为苹方的过程。

vue项目修改字体为苹方

在项目assets中创建字体文件夹fonts，在文件夹中添加字体文件

在这里插入图片描述

在fonts底下创建css文件 font.css

@font-face {
    font-family: 'PingFang';
    src: url('./PingFang.ttf');
    font-weight: normal;
    font-style: normal;
}

需要在全局样式中引入，app.vue中

在这里插入图片描述

<style lang="less">
@import "./assets/fonts/font.css";
body{
  font-family: PingFang !important;
}
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

limit for me

关注关注

0
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue中替换全局字体

老电影故事的博客

10-26

1638

产品说项目要拿去展会展示，但现在项目字体是微软雅黑，不支持商用，需要全局替换思源字体。

vue2.0项目页面字体切换为繁体

ARLENE2的博客

11-04

2534

因为项目需要，需要对手机端的字体进行简体和繁体的切换，如果引用vue-i18n的语言包，它不能转换接口返回的字体，而且只能实现部分字体的转换，数据比较固定，不符合项目需求。

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

vue全局修改字体样式(修改成苹方)

HelloWord176的博客

07-20

6552

1.首先你要先下载你需要的字体（这里已苹方为例） 2.在你的项目 src 文件下创建一个文件夹里面有两个文件，一个是你需要的字体的文件，一个是 css 样式文件 3.其中 css 文件里面设置一下样式： @font-face { font-family: 'PingFang'; src: url('./PingFang.ttf'); font-weight: normal; font-style: normal; } 4. 在 app.vue 文件中引入字体，全局修改

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

weixin_62428445的博客

07-18

2479

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

vue3使用pingfang字体

03-13

2074

自行百度.下载完解压后会得到如图所示的ttf文件，将文件拷贝到项目src/static文件夹下。

Vue3 || 一键切换字号/背景色

weixin_45862553的博客

01-12

2987

总的思路就是这句话：window.document.documentElement.setAttribute(‘变量名’, 值);

vue中引入第三方字体文件的方法示例

10-17

在Vue.js项目中引入第三方字体文件是常见的需求，这可以为网页或应用提供自定义的字体样式，增强视觉效果。本篇文章将详细讲解如何在Vue项目中实现这一操作，包括下载字体文件、引入字体文件、配置Webpack以及解决...

在vue3.0项目中使用tinymce富文本编辑器

mrjimin的博客

12-02

1万+

在 vue3.0 安装tinymce 使用npm安装tinymce-vue包 npm install --save "@tinymce/tinymce-vue@^4" 会安装@tinymce和tinymce这两个包，不需要再单独安装tinymce包注意： tinymce-vue包的版本 4支持 Vue3.0版本，但不支持vue2.0版本。对于 Vue2.0项目，就要安装tinymce-vue版本 3 （npm install --save “@tinymce/tinymce-vue@^3”）

前端使用fontfaceobserver库实现字体设置

kirinlau的专栏

11-28

697

要使用FontFaceObserver来加载设置项目本地的字体，先确保字体文件位于项目中或者可以从服务端获取到，这样就可以使用FontFaceObserver来检测并加载这些字体下面写个伪代码的示例：首先引入字体资源，css配置字体。

Vue3使用Tinymce6富文本编辑器

cczsmile的博客

07-08

1933

Vue3使用Tinymce6富文本编辑器

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

10-17

今天小编就为大家分享一篇在vue中更换字体,本地存储字体非引用在线字体库的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue项目引入字体.ttf的方法

12-09

1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4、配置webpack.base.conf.js 文件 5、App.vue引入字体 6、可在body中设置字体 body{ font-family: FZCYJ; } 以上这篇vue项目引入字

Win10 系统替换 macOS 苹方字体 - 瞬间提升文字清晰

06-10

由于苹果 Macbook 几乎全系标配超高清的视网膜屏，所以 macOS 自带的「苹方字体」可以说天生就是为高分屏而设计的！在 2K、4K 甚至更高的分辨率下显示效果拔群！那么，如果将 Win10 的系统默认字体替换成苹方，自然就能获得相当不错的高清字体渲染效果了。

三步教你设置网站字体为苹方

weixin_46630782的博客

07-04

2230

看了很久还是觉得苹果的字体最好看，所以今天教大家怎么把网站字体换成苹方，瞬间提高网站的观赏度。

vue中更换字体，本地存储字体非引用在线字体库

岁末zzz的博客

07-29

565

1，首先把下载的字体两种格式放到本地 2，新建文件夹 3，在这个文件里写 4，这main.js 里引用 5，在style里引用字体，结束！

Vue进阶（幺捌伍）：动态设置系统字体

IT全栈华强工作室

04-13

2731

前言在项目优化过程中，实现了主体色替换功能，接下来考虑实现系统字体设置，主要提供3种字体大小供用户选择。实现思路 <el-dropdown-menu style="color: #20a0ff" slot="dropdown">  <el-dropdown-item divided style="display: flex; justify-content: space-around; width: 220px; padding-to

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

最新发布

03-19

<think>嗯，用户问如何在Vue项目中引入苹方字体。首先，我需要确定苹方字体的来源。因为苹果的苹方字体是受版权保护的，不能随意分发，所以用户可能需要确认他们是否有权使用该字体，或者是否有其他合法获取方式。比如，用户可能已经购买了授权，或者打算使用系统自带的字体，而不用嵌入到项目中。接下来，如果用户确实需要引入字体文件，步骤大致是怎样的呢？首先，他们需要将字体文件（比如.ttf或.otf格式）放在项目的静态资源目录中，比如src/assets/fonts。然后，在CSS中定义@font-face规则，指定字体家族和文件路径。这里要注意路径是否正确，特别是在构建后可能会影响路径解析。然后，在Vue组件中，他们需要引入这个CSS文件，或者在全局的样式文件中引入，以确保整个项目都能使用这个字体。如果是全局引入，可能需要检查是否会影响其他地方的字体设置，或者是否需要覆盖默认字体。另外，使用系统自带字体的情况，可能只需要在CSS中设置font-family，列出苹方字体和其他备用字体，这样在支持苹方字体的系统上会自动使用，否则回退到其他字体。这时候需要确认字体名称是否正确，比如使用'PingFang SC'等。还有可能需要处理不同的字体格式，比如woff、woff2等，以优化加载性能。同时，字体文件的体积可能较大，需要考虑压缩或使用子集提取来减少文件大小。另外，Vue项目中使用SCSS或LESS的话，可能需要调整导入路径或者变量设置。还有，如果用户使用的是Vue CLI创建的项目，可能需要配置webpack来处理字体文件，但通常CLI已经默认配置好了，所以可能不需要额外配置。还需要注意字体加载的性能问题，比如使用preload来提前加载字体，或者使用font-display属性来控制字体加载期间的显示行为，避免布局偏移或长时间空白。可能用户会遇到的问题包括字体不生效，这时候需要检查路径是否正确，字体格式是否支持，CSS是否正确引入，或者是否有缓存问题。另外，跨平台测试也很重要，确保在不同操作系统和浏览器上都能正确显示。最后，是否需要考虑版权问题，提醒用户确保合法使用苹方字体，避免法律风险。如果是商业项目，这一点尤其重要。</think>在Vue项目中引入苹方字体(PingFang)的完整步骤如下： ### 方法一：使用系统自带字体(推荐) ```css /* 在全局CSS文件中添加 */ body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; } ``` *优点*：无需加载字体文件，直接调用用户系统已安装的苹方字体 ### 方法二：手动引入字体文件 1. 将字体文件(.ttf/.woff)放入项目目录建议路径：`src/assets/fonts/` 2. 创建字体CSS文件（如`fonts.css`） ```css @font-face { font-family: 'PingFang'; src: url('../assets/fonts/PingFang-Regular.woff2') format('woff2'), url('../assets/fonts/PingFang-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``` 3. 在main.js中全局引入 ```js import '@/assets/css/fonts.css' ``` 4. 应用字体样式 ```css body { font-family: 'PingFang', sans-serif; } ``` ### 注意事项 1. 版权问题：苹方字体是苹果公司版权所有，需确保拥有合法授权 2. 字体格式建议： - woff2：现代浏览器优先格式 - woff：兼容旧版浏览器 3. 性能优化： ```html  <link rel="preload" href="/fonts/PingFang-Regular.woff2" as="font" type="font/woff2" crossorigin> ``` ### 完整目录结构示例 ``` src/ ├── assets/ │ ├── fonts/ │ │ ├── PingFang-Regular.woff │ │ └── PingFang-Regular.woff2 │ └── css/ │ └── fonts.css ``` ### 验证字体是否生效在浏览器开发者工具中： 1. 检查`Computed`样式中的font-family 2. 查看网络请求中的字体文件加载状态如需使用其他字重（如Medium/Bold），需为每个字重单独添加@font-face声明，并对应不同字体文件。