vue中使用自定义字体

最新推荐文章于 2024-03-19 11:17:24 发布
最新推荐文章于 2024-03-19 11:17:24 发布
阅读量6.9k 收藏 2
点赞数 4
分类专栏： font-family i自定义字体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanseguhui/article/details/94629601
版权

以思源字体为例：下载其ttf文件

1.下载SourceHanSansCN-Regular.ttf文件

2.网上搜索font-face转换器

  根据提示下载对应文件

例如：

3.在vue项目中新建文件夹并复制下载下来的相应文件

4.在main.js中引入引入css文件

5.在需要的地方进行使用

 

七上八下的爆米花
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目中安装字体及使用方法
yh8899abc的博客
08-20 1793
1、新建一个css样式文件，比如common.css @font-face { font-family: SourceHanSansCN-Regular; src: url('/static/web/font/SourceHanSansCN-Regular.otf'); } @font-face { font-family: DINPro-Light; src: url('/static/web/font/DINPro-Light.otf'); } @font-face
前端文字 前端文字 思源黑体 ！！！
03-16
前端文字 前端文字 思源黑体 ！！！
SourceHanSansCN-Normal.ttf
06-06
SourceHanSansCN-Normal.ttf
一站式总结Vue项目中如何自定义文字样式
最新发布
m0_48978227的博客
03-19 1311
在做数字化大屏的时候，数字展示如果用默认的字体影响整体的观感。所以最好要用有科技感的数字展示。纵观系统自带的字体包，都符合不了预期的效果。只能从现有的网站资源下载字体包，进行引用，然后用到对应想要改变的字体中。此总结可用于Vue中所有想要改变字体样式的情况。在对应想要改变的字体样式中使用刚刚在@font-face规则中定义好的引用名称。important;注意：如果当前根元素font-family样式元素权重很大，则需要加!important提高当前定义元素属性的权限。
vue项目使用自定义字体
F_mengze的博客
06-23 745
我们使用思源字体为例子： 百度下载：SourceHanSansCN-Regular.ttf文件 百度搜索font-face转换器 将下载的文件拖到左边，点击立即生成。 加压文件会得到如下文件： 在vue项目中新建文件夹并复制下载下来的相应文件 在main.js中引入引入css文件 在需要的地方进行使用： 就OK了！ ...
vue中使用外部字体
weixin_44781409的博客
08-12 612
有时候为了个性化，可能需要为部分字体添加特殊的font-family 1.在static文件夹中创建font文件夹将字体文件放入 2. 在font文件中新建font.css css内容如下： @font-face { font-family: 'SourceHanSans'; //自定义文字名 src: url('./SourceHanSansCN-Normal.otf')...
SourceHanSansCN-Regular.ttf
09-09
SourceHanSansCN(思源黑体CN)，SourceHanSansCN(思源黑体CN)，SourceHanSansCN(思源黑体CN)，SourceHanSansCN(思源黑体CN)，SourceHanSansCN(思源黑体CN)，SourceHanSansCN(思源黑体CN)，SourceHanSansCN(思源黑体CN)，SourceHanSansCN(思源黑体CN)，
vue项目里面引入字体包
nian_10的博客
02-19 1945
项目中引入字体包的引入和定义. 看完这篇文章你成功get
vue 引用自定义ttf、otf、在线字体的方法
01-19
1. 将下载好的字体放到本地目录 分别是两种字体 放到项目的 assets 目录中 2. 引入字体文件 首先创建一个 styles 文件夹，之后也可以用于存放一些公共的样式文件。再新建一个 index.less 文件，引入字体。 @...
vue如何使用外部特殊字体的操作
01-19
5、在需要用到特殊字体的地方，把 font-family:”自定义字体名”,这里的优设标题就是在font.css文件里自定义的字体名 这样就实现使用特殊字体啦，希望对萌新有所帮助~ 补充知识：怎么把分化成元，并且保留两位小数,...
VUE自定义树形结构组件.zip
04-21
vue可以自动以封装tree树形结构图，如高亮的背景色、字体颜色、树形图图标等。高亮demo使用的是name，如果有需要可以直接改为value
vue自定义过滤器，例如给文字加颜色
04-02
vue.js的filter定义的方式，已经简单的demo，自定义过滤器如何给文字加颜色
【Web前端】自制精简版的思源黑体ttf（728kb） - 包含2630个常用汉字+字母+数字+常用符号
Rudon滨海渔村的博客
07-05 4344
好看、免费可商用；思源黑体_百度百科思源黑体是Adobe与Google历时三年在2014年7月宣布推出的一款开源字体，这是一款新的供桌面使用的开源 Pan-CJK 字体家族， 有七种字体粗细（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy），完全支持繁体中文、简体中文、日文和韩文，这些全部都包含在一种字体中。它还包括来自我们颇受欢迎的 Source Sans字体家族的拉丁文、希腊文和西里尔文字形。https://baike.baidu.com/item
vue中引入字体
weixin_40856652的博客
06-30 8714
vue中引入字体
vue项目引入外部字体
qq_35971976的博客
07-14 1393
4.在main.js中引入font.css文件
vue 中使用自定义字体
lfalt的博客
09-06 6733
自定义字体
Vue中引入外部字体
热门推荐
m0_51431448的博客
05-31 1万+
简述 使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包 进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...
如何在vue中引入字体
Orange71234的博客
06-21 6999
在前端开发中，选用合适的字体往往会极大地提升网站的视觉体验。然而，网页中默认字体的种类和风格有限，且在不同的设备、浏览器上渲染效果不尽相同。因此，很多开发者会选择自定义字体来提升用户体验。2.在vue项目下的src/assets文件夹下创建font文件夹，放入需要用的字体并新建font.css。4.在main.js中引入刚才创建的css文件。3.font.css写入如下代码。5.在页面中使用字体。
vue 使用自定义字体
08-11
在Vue中使用自定义字体可以通过以下步骤实现： 1. 将自定义字体文件（通常是包含.ttf、.otf、.woff等格式的文件）放置在项目的静态文件夹（如`public/fonts`）中。 2. 在Vue组件中的样式文件（通常是`.vue`文件中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值