前端如何引用字体文件

已于 2022-03-16 18:54:14 修改
阅读量4.2k 收藏 5
点赞数 3
分类专栏： css 文章标签： css css3 html
于 2022-03-16 18:37:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44594219/article/details/123532778
版权

1.下载需要的字体文件，存放在项目目录中

2.在css中引用并定义字体名

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

3.使用

body {
	font-family: YouSheBiaoTiHei;
}

使用前后对比

最后再附上该字体图标文件

YouSheBiaoTiHei优设标题黑字体-Webpack文档类资源-CSDN下载

大宁宁吖
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端开发字体文件压缩演示文件
04-17
在前端开发中，为了提升网页性能和用户体验，字体文件的优化是至关重要的。"前端开发字体文件压缩演示文件"提供了一个实例，展示了如何通过压缩字体文件显著提高页面加载速度。这个压缩包("fontZipDemo")可能包含了...
PDFJS使用的CMap字体文件
04-25
在遇到PDF文件使用了PDFJS默认不支持的字体时，我们需要为PDFJS提供额外的字体文件，这就是CMap（Character Map）文件的作用。 CMap文件是Adobe系统用来描述Unicode字符到字形编码映射的一种格式，它帮助PDF阅读器...
前端必知：30.引入外部字体以及文字阴影
qq_52799985的博客
07-27 2272
引入外部字体和使用文字阴影是前端开发中的重要知识点之一，下面我将介绍它们的意义和用法。
vue 引入字体文件
weixin_50085094的博客
09-04 675
【代码】vue 引入字体文件。
前端引入不同的字体风格
最新发布
A15029296293的博客
06-19 344
为了实现页面更加美观，产品可能希望有不同的字体风格，那么就需要前端去实现不同的字体风格，实现不同的字体风格也非常简单，步骤如下。
项目开发常用css样式案例大全(例如字体渐变色)
qq_44988714的博客
06-24 282
【代码】项目开发常用css样式案例大全(例如字体渐变色)
项目中使用非默认字体
weixin_49809163的博客
08-04 399
项目中引入某种非默认字体
vue如何使用外部特殊字体
GongWei_的博客
07-27 1333
话不多说先看效果： 我这里使用的是“优设标题这种字体”，接下来就是实现步骤了： 1、先在百度上下载所需要的字体ttf文件 2、在src文件夹新建common文件夹再建 font文件夹 3、在font文件夹里新建 font.css文件，以及把下载好的ttf文件放入 font.css内容如下 4、在App.vue的style里引入font.css文件 5、在需要用到特殊字体的地方，把 font-family:”自定义字体名”,这里的优设标题就是在font.css文件里自定义的字体名 这样就实现使用特
学习笔记——使用第三方字体
qq_41339126的博客
02-22 917
在项目中使用第三方字体。 1.导入第三方字体到项目中 以ttf结尾的文件。 2.在CSS中注册并使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="wi.
前端工程配置字体库下载使用详细介绍
weixin_45428910的博客
08-03 954
前端工程配置字体库下载使用详细介绍
HTML导入字体并使用
Crayon111的博客
03-05 5960
步骤1： 选择自己需要的字体 字体下载网站 下载 -》解压-》得到xxx.ttf文件 步骤2： 将得到的ttf文件放入自己的项目中 步骤3： 在@font-face{ font-family: 'pangmenzhengdao'; src: url(../fonts/pangmenzhengdao.ttf); } @font-face{ font-family: 'youshebiaotihei'; src: url(../fonts/youshebiaotihei.ttf); } 步骤
纯前端字体文件优化实践，字体文件压缩93%!
jinchenxinglaiy的博客
04-17 3476
高保真数据可视化大屏页面，设计部同学在提供UI图的同时还会提供UI图中使用到的字体文件，例如：思源字体、微软雅黑等类型的字体。但是，通常来说UI提供的字体包都很大，大都在十几M，加载非常缓慢，严重影响用户体验。从上图可以看出，字体压缩比确实是高达93%，对比网络加载速度，同样6M带宽字体文件由原来的18s到目前的500ms，用户访问网页带来飞升一般的体验。字体文件体积大的原因主要是中文有上万个字体，可是常见的中文字体只有3000个左右，删除特殊字符以及生僻字，可以大大减小字体文件的体积。
html 字体引入
Purgatory001的博客
07-15 2687
html 字体引入
ps字体前端或许有用
03-03
接下来，我们谈谈文件名称列表中的"2016.2新增字体"。这可能是某个设计师或团队在2016年2月收集的一批新的字体资源。这些字体可能是为了满足当时的流行趋势，或者是为了提供更丰富的设计选择。在前端开发中，使用新...
ko.tar.gz_文件上传前端
09-24
在压缩包内的"www"文件夹通常代表Web服务器的根目录，里面可能包含HTML、CSS、JavaScript等前端资源文件，以及可能的图片、字体或其他静态资源。开发者需要掌握HTML结构、CSS样式和JavaScript逻辑来理解和修改这些...
html css led字体包
12-16
2. `ds-digi-webfont.eot`, `.svg`, `.ttf`, `.woff`, `.woff2`：这些是不同格式的Web字体文件，用于支持跨浏览器的字体渲染。EOT（Embedded OpenType）是Internet Explorer早期使用的格式，SVG（Scalable Vector ...
前端引入字体文件
见贤思齐焉，见不贤内自省
06-07 663
前端引入字体文件
YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志
YDOOK
02-13 1074
YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志 © YDOOK JYLin 1. 将新 icon 文件拖入文件目录： ./public: 2. 新建或者在已有的 vue.config.js 文件根位置中输入： module.exports = { pwa: { iconPaths: { favicon32: 'ydook.ico', favicon16: 'ydook.ico',
前端中如何引入字体包？
lb_888888的博客
08-18 1161
**注意：严格区分大小写，包括字体的后缀名，以及loader的大小写。2、通过以下方式导入（全局或者局部都可以）1、把字体文件引入到放置图片或者任意位置。***有不理解的小白私我，看到必会。3、通过以下方式调用。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值