引入字体包（vue 原生js皆适用）

最新推荐文章于 2025-04-09 11:38:08 发布
原创 最新推荐文章于 2025-04-09 11:38:08 发布 · 794 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

本文介绍了如何在前端项目中添加自定义字体，包括从UI设计稿获取字体、创建static/font文件夹存储ttf字体包，以及在CSS中使用@font-face规则实现全局或局部应用指定字体。
部署运行你感兴趣的模型镜像

首先 我是找UI小姐姐要的字体包

1.在static静态资源目录下建一个font文件夹 将字体包放进去

2.在你要使用的css文件中放入以下代码

@font-face{
	font-family: "SourceHanSansCN-Medium,SourceHanSansCN";
	src:url("../static/font/SourceHanSansK-Medium.ttf")
}

注意：font-family 后面要跟的是你的蓝湖设计稿上面的字体 src是你的字体包的路径 一定是ttf格式

3.在你所需要的位置使用该字体样式 例如我只是局部使用

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

ACE-Step

ACE-Step

音乐合成
ACE-Step

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

李妮嘎_
关注
【NodeJS & JS】动态加载字体的各方式及注意事项；
从今年开始写写博客~~
01-26 1618
方案1：创建 style 标签，写入@font-face{font-family: 'xxx';src: url('xxx')} 等相关字体样式；将style标签添加到body里； 方案2：通过 new FontFace() 进行字体加载，然后通过相关API进行检测加载情况； 方案1的适用场景：适合一次性加载所需字体；自己对应功能读取字体结构信息不依赖浏览器的真实加载情况；对加载字体的延迟情况无要求； 方案2的适用场景：适合完全加载好字体再执行某功能，避免字体还原显示异常（例如我项目所用的fabric库
html页面引入vue.js + elementUI 离线包快速开发前端页面
qq_43637218的博客
06-09 4181
运用html + vue.js + element快速开发页面
JavaScript字体工具包Font.js.zip
07-17
Font.js 是一个强大的JavaScript字体工具包，可处理字体加载事件、metrics 信息以及更好的画布元素的 measureText 方法，可获取字体高度边框等信息。 在线演示：http://pomax.nihongoresources.com/pages/Font.js/ 示例代码： var font = new Font(); font.onload = function() { // measure some text console.log(font.measureText("some text", 14)); // style an element document.querySelector("p").style.fontFamily = "'" font.fontFamily "'"; } font.onerror = function(e) { alert(e); } // kick off the actual loading font.fontFamily = "My Font"; font.src = "acmesa.ttf"; 标签：Fontjs
js获取电脑中所安装的所有字体
08-28
可用于js获取本地电脑所安装的所有字体，用法有说明，把js放在网页中运行即可
JS中字体文件的加载和使用
不怕麻烦的鹿丸的博客
09-15 2631
直接在对应的标签上使用 css 中的 fontFamily 赋值你定义的字体名字即可。加载字体文件主要用到 FontFace 这个对象。检测字体文件是否已加载。
JS 计算时间差，（引入外部字体文件）
weixin_30480075的博客
04-13 137
JavaScript Date() 对象： 　　new Date() ：时间对象，会把当前时间作为其初始值； 　　setFullYear() ：用于设置月份，可有三个参数，setFullYear(year,month,day)； 　　setHours() ：设置指定时间的小时，可有四个参数，setHours(hour,min,sec,millisec)； 　　getDate() ：返回月份...
vue3+vite 组件打包
04-16
Vue3 是 Vue.js 框架的最新版本，带来了许多性能优化和新特性，如Composition API，而 Vite 是由 Vue.js 作者尤雨溪开发的新型构建工具，以其快速的开发服务器启动和热模块替换（HMR）而受到青睐。 **Vue3 知识点：...
【JavaScript源代码】vue.js实现日历插件使用方法详解.docx
12-30
Vue.js是一个流行的JavaScript框架，用于构建用户界面，其核心理念是数据驱动和组件化。在我们的示例中，我们将创建一个简单的日历插件，允许用户选择年份和月份，并显示相应的日期。 首先，我们来看CSS部分。这...
精选资源
electron_three.js_vue.zip
12-17
标题 "electron_three.js_vue.zip" 暗示了这是一个基于Electron框架的项目，结合了Vue.js前端框架和Three.js库来创建3D图形。这个压缩包包含了一系列用于开发3D应用的文件和配置，让我们一一解析它们的重要性及在...
vue仿word表单录入demo
03-28
`static`目录通常用于存放静态资源，如图片、字体文件或者不在Vue组件中的JavaScript和CSS文件。在本Demo中，可能会有用于模拟Word样式的CSS文件或图标资源。 `config`文件夹可能包含了项目配置信息，如开发环境和...
JavaScript字体操作库Plumin.js.zip
07-18
Plumin.js 是一个用在浏览器和 Node.js 上对字体进行操作的 JavaScript 库，示例代码：(function(p) { var font = new p.Font({         familyName: 'Demo',         ascender: 800,         descender: -100     }),     a = new p.Glyph({         name: 'a',         unicode: 'a',         advanceWidth: 496     }),     i = new p.Glyph({         name: 'i',         unicode: 'i',         advanceWidth: 268     }),     o = new p.Glyph({         name: 'o',         unicode: 'o',         advanceWidth: 536     }),     shape; // a contour shape = new p.Path.RegularPolygon({     center: [268, 124],     sides: 3,     radius: 248 }); shape.rotate(180, [268, 124]); shape.scale(1, 1.4, [268, 0]); a.addContour(shape); // i contour shape = new p.Path.Rectangle({     point: [60, 0],     size: [140, 500] }); i.addContour(shape); // o contour shape = new p.Path.Ellipse({     point: [50, 0],     size: [436, 510] }); o.addContour(shape); font.addGlyphs([ a, i, o ]); font.updateOTCommands()     .addToFonts(); })(plumin.paper); 标签：Plumin
前端js/CSS中引入字体(@font-face)
热门推荐
weixin_55763825的博客
12-06 2万+
前端设计采用@font-face规则进行字体的引入 详细步骤： 一、在CSS引入字体； 1、单个字体引入； 2、多个字体引入。 二、在JavaScript中使用: 1、使用className = { styles.a } ; 2、直接使用style = {{ fontFamily：AdobeHeiTiStd-Regular }} 。 ...
引入字体包
qq_31392495的博客
04-27 1052
我接触的设计师都比较喜欢用苹方字体，然后每次都要引入字体包。 首先一定要设计师给ttf格式的文件，然后在scss中引入 @font-face{ font-family:'PingFangSC-Regular'; font-weight:normal; src:url('@/assets/font/PingFangSC-Regular.tff') } .ping{ font-family:'PingFangSC-Regular'; } 页面使用<p class="ping"&g
js加载字体文件 并等待字体文件加载完成
qq_38371250的博客
06-08 4160
async loadFonts() { console.log(location.href.split("#")[0] + "static/font/font_84.ttf"); const font = new FontFace( "font84", "url(" + location.href.split("#")[0] + "static/font/font_84.ttf" + ")" ); await font.load(); document.fonts.add(font);
JS引用google的字体
温故知新
03-31 1511
为了保证每一个用户都能看到使用的字体效果，google提供了引用字体。 首先 然后在页面样式中应用，所引用的字体。 具体的字体可以参考：http://www.google.com/fonts 负面影响：如果应用过多，会造成页面加载过慢。
引入字体文件的方法
weixin_30699463的博客
01-17 374
@font-face { font-family: SketchRockwell; /*这里是说明调用来的字体名字*/ src: url(‘SketchRockwell.ttf’); /*这里是字体文件路径*/ } .my_CSS3_class { font-family: SketchRo...
Vue.js 字体库引用
Corn___的博客
08-19 663
Vue.js 字体库引用
【js】web项目本地化引入ionicons字体图标
最新发布
未央claw
04-09 458
web项目本地化引入ionicons字体图标全过程。
哇去，有了这篇文章，项目中引入了再多的字体包，我都不怕了！！！
LIMI_伞梦的博客
03-01 1657
font-weight实现按需自动引入不同自重字体包，unicode-range实现按需自动引入不同语言字体包
Vite插件压缩Vue.js项目资产与包优化指南
资源摘要信息:"从Vite压缩您的捆绑包和资产-Vue.js开发" 一、Vite简介 Vite是一个现代化的前端构建工具，它利用了ESM的原生导入功能和浏览器原生支持的模块热更新机制，从而实现了快速的冷启动和热模块替换。Vite...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值