Vue中使用自定义字体

为了提升项目视觉效果,本文介绍了如何在项目中引入自定义字体。首先,在assets/fonts目录下创建font.less文件,定义@font-face规则,如'zkwyt'字体,并引用对应的.ttf文件。接着,将字体文件zkwyt.ttf放入指定目录。最后,在App.vue中通过@import引入font.less,确保整个应用可以使用新的字体样式。通过这种方法,可以轻松地为项目增添个性化字体元素。
部署运行你感兴趣的模型镜像

为了美观效果,不想使用默认字体,使用其他好看的字体,此时在项目中就需要:
创建 assets/fonts/font.less

@charset "UTF-8";

@font-face {
    font-family: 'zkwyt';
    src: url('./zkwyt.ttf');
}

将字体文件 zkwyt.ttf 放 assets/fonts 文件夹中。

在 App.vue 引入 font.less

<style>
@import './assets/fonts/font.less';
#app {

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

Vue3 项目中引入和使用自定义字体,可以通过以下方式实现: 1. **准备字体文件** 将所需的字体文件(如 `.ttf`, `.woff`, `.woff2`, `.eot`, `.svg` 等)放置在项目的 `assets` 文件夹中,例如 `src/assets/fonts/`。 2. **定义 `@font-face` 规则** 在项目的全局样式文件(如 `main.css` 或 `App.vue` 中的 `<style>` 标签)或单独的字体样式文件中,使用 `@font-face` 定义自定义字体的名称及其路径。 ```css @font-face { font-family: 'MyCustomFont'; src: url('@/assets/fonts/my-font.ttf') format('truetype'); font-weight: normal; font-style: normal; } ``` 上述代码片段中,`font-family` 指定了字体名称,`src` 指向字体文件的路径,并通过 `format('truetype')` 声明字体格式类型[^1]。 3. **使用自定义字体** 在组件或全局样式中,通过 `font-family` 属性调用已定义的字体名称,以应用自定义字体。 ```css .custom-text { font-family: 'MyCustomFont', sans-serif; } ``` 如果有多个字体文件,可以分别定义多个 `@font-face` 块。例如: ```css @font-face { font-family: 'Sunday April'; src: url('@/assets/fonts/Sunday April.ttf') format('truetype'); } @font-face { font-family: 'Smiley_Sans_Oblique_斜体'; src: url('@/assets/fonts/Smiley_Sans_Oblique_斜体.ttf') format('truetype'); font-weight: normal; font-style: normal; } ``` 这样可以在不同组件或样式中分别使用这些字体名称[^2]。 4. **确保路径正确** Vue3 项目使用 `@` 作为 `src` 目录的别名,因此确保字体文件的路径正确无误。如果字体文件放置在 `public` 文件夹下,可以直接使用相对路径,例如: ```css src: url('/fonts/my-font.ttf') format('truetype'); ``` 并将字体文件放在 `public/fonts/` 目录中。 5. **优化字体加载** 对于大型字体文件,建议使用 `font-display: swap` 以防止字体加载过程中文本不可见的问题: ```css @font-face { font-family: 'MyCustomFont'; src: url('@/assets/fonts/my-font.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } ``` 这样可确保在字体加载完成前使用备用字体显示文本,提升用户体验。 ### 示例代码 在 `App.vue` 的 `<style>` 部分定义并使用字体: ```vue <style> @font-face { font-family: 'MyCustomFont'; src: url('@/assets/fonts/my-font.ttf') format('truetype'); font-weight: normal; font-style: normal; } .custom-text { font-family: 'MyCustomFont', sans-serif; } </style> <template> <div class="custom-text">这是使用自定义字体的文本。</div> </template> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

欢莱

为您解决问题,此项目我成功完成

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值