vue项目中使用 ttf字体

最新推荐文章于 2024-04-03 13:39:00 发布
最新推荐文章于 2024-04-03 13:39:00 发布
阅读量943 收藏 1
点赞数
文章标签： vue.js 前端 javascript ttf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laoyaoshilaoyao/article/details/122486630
版权

1、先下载ttf字体（电脑本就带着部分ttf字体）

2、引入 （以隶书举例）

在这里插入图片描述

在assets 下面建立一个font文件夹，写入一个font.css 文件，并把你下载的ttf文件放入

3、font.css

在这里插入图片描述

font-family:'LiSu'  //你引入的ttf字体起的名字，当然 叫什么都行

4、使用

正常用，使用时就是在css里面写入    font-family:'LiSu'
老妖zZ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 项目中引入 .ttf 字体
且听风吟的博客
10-20 2956
开发中发现，UI设计图中的字体效果，在css中设置了没有生效，发现需要引入字体文件，就自己找了下方法，顺便记录下来。 1、下载需要的字体，.ttf 文件； 2、将字体文件放到 assets 文件夹中： 3、在当前文件夹中创建一个font.css文件： font.css： @font-face { /* 重命名字体名 */ font-family: 'OPPOSansB'; /* 引入字体 */ src: url('./fonts/OPPOSans-B.ttf'); font-weigh
vue用import方式引入ttf字体文件报错及解决方法
格の调
08-29 3429
关于在vue项目中引入ttf格式的字体文件，基本工作： 下载下来字体文件，新建一个font文件夹，把字体文件放进去，在新建一个font.css文件（可以不用新建，直接在主css文件里写），把字体文件@font-face引入进css里。 注：@font-face也可以直接在scss文件里写或引入，不一定要在css文件里。 前面工作做完后，运行报错O(∩_∩)O 网上查了好半天，普遍都说是配置文件webpack.config.js中没有配置解析字体的模块。 用到的方法就是在build -> webpa
Vue项目中引入外部字体文件
最新发布
蓝胖子的博客
04-03 1093
Vue项目中引入外部字体文件
vue项目中使用ttf字体
风如也的博客
11-04 2122
前提：在 vue 项目中使用 ttf 字体 1.引入字体文件 将已有的字体文件xx.ttf 放入项目的assets 目录下 然后创建 fonts.css 文件，文件内容： @font-face { font-family: 'design-title'; src: url('./design-title.TTF'); font-weight: normal; font-style: normal; } 在 main.js 中引入字体的 css 文件 import '@/asset
vue使用“.ttf“字体包
qq_40987210的博客
07-14 264
第一步将ttf文件放到项目目录中 第二步在css中引入 font.css @font-face{ font-family: '中黑简体'; src: url('时尚中黑简体.TTF'); font-weight: normal; } 第三步 在main.js引入font.css main.js import '@/assets/style/font/font.css' 第四步 使用 div{ font-family: '中黑简体' } ...
.ttf字体文件引入vue项目及使用
xi_aot的博客
09-06 2657
.ttf字体文件引入vue项目及使用
vue项目引入字体.ttf的方法
12-09
在Vue项目中引入自定义字体，特别是`.ttf`（TrueType Font）格式的字体，是提高用户体验和品牌一致性的重要步骤。以下是一个详细的步骤指南，教你如何在Vue项目中引入`.ttf`字体： 1. **下载字体文件**：首先，你...
vue 引用自定义ttf、otf、在线字体的方法
01-19
放到项目的 assets 目录中 2. 引入字体文件 首先创建一个 styles 文件夹，之后也可以用于存放一些公共的样式文件。再新建一个 index.less 文件，引入字体。 @font-face { font-family: Snickles; src: url('....
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
vue引入字体文件踩坑
qq_40893035的博客
05-18 2699
vue引入字体文件的正常步骤走一遍 1 . 下载字体文件并放入项目中 2 . 新建一个文件，font.css（不新建也行，.less和.scss也行）只要能引入到单页面或者main.js中就可以 注意！！！：这个css文件一定要和字体文件在同级目录下，要不然可能会出现字体不起作用的情况 font.css文件里就这样写就完事了，压根不用写什么format后缀 @font-face { font-family: 'D-DIN'; src: url('D-DIN.ttf'); font-weight
vue项目引入字体.ttf
WebDestiny的博客
09-30 1925
一、下载完字体后在src下新建common文件，文件夹中包含以下文件（FZCYJ.ttf 为例） 二、打开font.css @font-face { font-family: 'myfont'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; }...
vue改造textarea多行文本框样式
公众号安哥说前端
07-28 4406
vue改造textarea多行文本框样式
vue项目引入外部字体文件
m0_49403042的博客
02-08 968
1、在根目录的assets中新建fonts目录。2、在main.js中引入字体文件。
vue-cli3.0项目中使用ttf字体
otatoz
07-02 2752
1、下载字体 此处下载的字体为HYXinHaiXingKaiW.ttf 2、将下载好的字体放到项目的assets下，同时新建font.css文件 3、font.css中配置字体 @font-face { font-family: 'HYXinHaiXingKaiW'; src: url('HYXinHaiXingKaiW.ttf'); font-weight: normal; font-style: normal; } 4、main.js中引入字体 5、
vue 引用自定义ttf、otf、在线字体
热门推荐
GreekMrzzJ的博客
10-11 4万+
1. 将下载好的字体放到本地目录 分别是两种字体 放到项目的 assets 目录中 2. 引入字体文件 首先创建一个 styles 文件夹，之后也可以用于存放一些公共的样式文件。再新建一个 index.less 文件，引入字体。 @font-face { font-family: Snickles; src: url('../assets/Snickles-webfont.ttf')...
前端使用外部字体（ttf文件或iconfont）
qq_42566295的博客
07-19 3046
前端使用外部字体（ttf文件或iconfont）
vue 引入字体文件
weixin_44535797的博客
05-15 2667
引入字体文件 1、将字体文件拷贝到assets/ttf文件夹下。 2、在assets/css文件夹下新建font.css文件，在其中引用字体文件： @font-face { font-family: "DS-DIGII"; src: url('../ttf/DS-DIGII.TTF'); font-weight: normal; font-style: normal...
vue-cli+webpack项目打包到服务器后，ttf字体找不到
我的征程
08-20 2953
vue-cli+webpack项目打包到服务器后，ttf字体找不到 更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', ...
vue引入.ttf字体
04-08
可以通过在CSS中使用@font-face规则引入.ttf字体文件。具体步骤如下： 1. 在项目中创建一个fonts文件夹，并将.ttf字体文件放入其中。 2. 在CSS文件中使用@font-face规则，指定字体名称、字体文件路径和字体格式，如下所示： @font-face { font-family: 'MyFont'; src: url('fonts/myfont.ttf') format('truetype'); } 3. 在需要使用该字体的元素中，使用font-family属性指定字体名称，如下所示： body { font-family: 'MyFont', sans-serif; } 这样，就可以在Vue项目中使用.ttf字体文件了。希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值