html如何调用特殊字体,怎样在页面中引入特殊字体呢？

最新推荐文章于 2022-10-09 17:01:33 发布
最新推荐文章于 2022-10-09 17:01:33 发布
阅读量990 收藏 2
点赞数
文章标签： html如何调用特殊字体
本文介绍了如何使用字蛛工具来压缩中文字体库，以解决因引入大字体包导致的页面加载速度慢的问题。通过设置CSS的`@font-face`规则并运行字蛛命令，可以生成仅包含页面所需文字的压缩字体文件，显著减少字体库的大小，提高用户体验。
摘要由CSDN通过智能技术生成

让网页自由引入中文字体成为可能，可能有人会说直接引入字体包，在样式中设置font-family:"XXX"不就好了吗？超级简单呢..

那我们一起看看字体包的大小(该实例中使用：喜鹊招聘简体)

a4a405e41fd67cfc284b9d3316f1058e.png

一个字体库文件十几兆，页面加载速度超级慢，严重影响用户体验，怎样做减法呢？

接下来给大家分享一个中文字体压缩器——字蛛

首先我们先写入一段默认显示文字的代码：

显示与众不同的字体

.container{font-size: 18px;line-height: 32px}

这一行是普通文本哦！

复制代码

页面显示截图如下：

382b80a58db0a0f119182de40dc0a1d5.png

接着我们准备引入特殊好看的字体，并且给字体库做减法咯。

前提条件：安装好node环境

1、安装font-spider

npm install font-spider -g

复制代码

构建插件：grunt-font-spider | gulp-font-spide

最低0.47元/天 解锁文章
羊小虞
关注
html页面调用php常量,js中的常量变量以及html文档三种引入js的方式
weixin_39560029的博客
03-16 679
js 是基于事件驱动的异步单线程的脚本编程语言，它的全称是 JavaScript，虽然里边有个 java 字样，但是和 java 编程语言一点关系都没有。它是一种脚本语言，基于解释器执行，它是边解释便执行的语言。浏览器控制台 Console 是一个浏览器内置的 JS 代码解释器。所以我们可以通过这个解释器来查看我们要展示的内容。调用语句为Console.log() 。一、js 中的常量、变量和数据...
网页引入特殊字体的几种方案
weixin_34258078的博客
02-27 378
网页使用的字体需要受制于操作系统，如果用户的操作系统没有安装某个字体，网页则会退而求其次的使用系统自带的字体。 因此我们并不能随便使用一些好看的字体，只能选用一些安全字体。比如：Helvetica，Arial，宋体，微软雅黑，如果能在网页上使用好看的字体就好了~ 可是引入字体对于英文来说，是合适的，因为字体文件本身不大。但是对于中文字体，一个字体文件就好几M，既耗费流量，又拖慢了加载速度，还会...
html中加入特殊字体,HTML加载特殊字体
weixin_31090341的博客
05-30 296
第一步获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。.TTF或.OTF，适用于Firefox 3.5、Safari、Opera.EOT，适用于Internet Explorer 4.0+.SVG，适用于Chrome、IPhone下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件，最常见的是.TTF文件，我...
html网页的特殊字体属性
零零乱乱
10-10 1338
在学习一个html项目代码的时候，发现网页中出现一副世界地图，它是在font-family属性中设置成webdings，然后使用“û”字符，就可以显示出世界地图的样子。 出于好奇，搜索了一下font-family属性，知道了网页中有特殊字体这么一说，只要将font-family属性设置为：webdings或wingding或symbol，即可将当前的ascill字符以相应的图片或特殊
网页中导入特殊字体@font-face属性详解
cc蒲公英的博客
10-09 175
网页中导入特殊字体@font-face属性详解
html如何调用特殊字体,网页中如何调用一些特殊字体或艺术字体？
weixin_32058239的博客
06-05 2180
在国内，中文网站显示的字体主要是以微软雅黑或宋体为主，而英文网站上显示的字体就丰富多样，毕竟英文字体类型容量比较小，网页加载比较快。网站上由于不同用户对特殊字体或艺术字体显示样式的青睐，网页上会调用用户想要的字体类型。那么，用户要求的字体是如何在网页中调用与显示呢？第1种调用方法：前提是字体类型文件要放到或安装到网站目录中，然后用下面的css样式进行调用，这里注意的是调用路径必须要正确，才能正常显...
详解angular如何调用HTML字符串的方法
08-27
在Angular开发过程中，有时我们需要将HTML字符串作为内容展示在页面上。然而，Angular默认的安全机制会阻止直接将HTML字符串插入到DOM中，以防止跨站脚本（XSS）攻击。本文将详细介绍如何在Angular中正确地调用并...
vue组件化可以调用html页面,vue组件（将页面公用的头部组件化）
weixin_39756540的博客
06-04 1456
呃……重新捡起前面用vue-cli快速生成的项目。之前是做过一个多页面的改造，以及引入vux的ui组件，这次在这个项目的基础上，再来聊聊vue中的component。别问我为啥总是写关于vue的博客，都是为了生计(………………)关于一些组件的概念之类的就不一一介绍了，官方文档说的很详细。下面进入正题，直接下载项目一 拿出之前的项目二 在这种需求下 ，自然就要使用我们的组件了，在index.js中添...
vue cli3 调用百度翻译API翻译页面的实现示例
10-16
这段代码中还使用了jQuery来简化DOM操作，并在将原文存入数据对象之前，用正则表达式去除了原文中的特殊字符。 然后，作者定义了一个名为`fanyi`的方法，该方法包含了调用百度翻译API的整个过程。在`fanyi`方法中，...
如何在html中使用特殊字体
m0_47659279的博客
11-10 4916
前言一、下载字体文件（.ttf文件）二、在html中引入.ttf字体文件三、引入字体文件后就可以将该字体应用到你的文本上了完整代码示例 前言 html中自带的字体很多，足以满足我们大部分需求，但特殊情况下，我们需要使用特殊的字体，本文介绍了如何在你的html网页中使用特殊字体 不多BB，先上效果图： 接下来就教大家如何使用特殊字体 一、下载字体文件（.ttf文件） 百度搜索你想要的特殊字体的.ttf文件并把它下载到一个你能记住的目录中，例如我把华文彩云.tf(记得解压并拿出.ttf文件)下载进了C盘.
html字体制作,用@font-face实现网页特殊字符(制作自定义字体)
weixin_36352023的博客
06-30 677
首先，我们去C盘Fonts文件夹里找到WEBDINGS.TTF字体，复制到桌面。接下来，我们需要一个软件，就是“fontforge”，它可以实现制作自定义字体的功能，我们后面就要用它来做一个适用于我们自己的字体库。下载好后解压，把WEBDINGS.TTF字体复制到里面，运行fontforge.bat并选择字体文件，然后出现这个界面：很多图形字符吧，是不是发现很多字符以前都用到过，只不是那时是用图片...
html渐变字体在线生成,哥特字体在线生成,哥特字体在线生成器,哥特字体在线转换...
weixin_28871645的博客
06-04 2540
/Files/DownLoad/font3/xmfont540.TTF字心坊梦幻哥特体字体200716599460字心坊梦幻哥特体字体/Files/DownLoad/font3/xmfont539.TTF字心坊暗黑哥特体字体200715314050字心坊暗黑哥特体字体/Files/DownLoad/font3/xmfont538.TTF字心坊幻夜哥特体字体200714191721字心坊幻夜哥特体字...
html字体及文本样式设置
m0_65214572的博客
07-21 7781
html字体及文本样式设置
网站调用服务器字体,网站调用字体库
weixin_39929813的博客
08-06 221
网站调用字体库 内容精选换一换鲲鹏开发套件是IntelliJ的一款扩展工具。通常可将此类工具称作集成开发环境插件。鲲鹏代码迁移插件是鲲鹏开发套件的子工具，作为客户端调用服务端的功能，完成扫描迁移任务，可以对待迁移软件进行快速扫描分析，并提供专业的代码迁移指导，极大简化客户应用迁移到鲲鹏平台的过程。当客户有软件需要迁移到鲲鹏平台上时，可先用该工具分析可迁移性和迁移投入，鲲鹏开发套件是IntelliJ...
html中如何引用其外部字体,css引入外部字体
weixin_30514427的博客
07-01 2641
第一步：首先获取要使用字体的三种文件格式.EOT、.TTF或.OTF、.SVG，确保能在主流浏览器中都能正常显示该字体。.EOT，适用于Internet Explorer 4.0+.TTF或.OTF，适用于Firefox 3.5、Safari、Opera.SVG，适用于Chrome、IPhone最常见的是.TTF文件，需要通过这种文件格式转换为其余两种文件格式。在线转换地址 ： https://...
网页使用中文字体的两种解决方案
兜ぃф糖
10-18 4692
解决中文字体在网页中的使用，有两种办法。 背景：英文的字体很好使用，因为只有26个大小写字母，以及一些符号，本身的字体文件就很小，不会对页面的加载造成多大的影响；但是中文的字体文件相当大，仅字体文件本身就5-6M，所以需要采取点手段才敢在网站中使用。 目前了解到的方法有两种： 第一种：使用有字库 ，http://youziku.com/    只需要挑选字体，对于网站中没有的字体用户
如何在HTML中引用网络字体
weixin_43581952的博客
08-07 3238
1、打开一个字体库，下载一款自己喜欢的字体。 我这里选择了阿里巴巴矢量图标库。 2、下载完成后，将后缀名为.ttf的文件移动到我们的HTML文件中。 我新建了一个Font文件专门用来存放字体库。 3、在html中加入style标签，然后再style标签中写入以下代码： 4、在p标签中引用我们添加进去的字体样式，打开浏览器检查是否成功。 可以看到第二行的文字已经发生改变，说明我们的引用成功。 ...
html引用ttf字体文件
想好了再写！
09-14 3755
1.引入字体文件 2.在样式表中定义： @font-face { font-family: PINGFANG; //自定义字体名称 src: url(./fonts/PINGFANG\ LIGHT.TTF) //存放字体文件的路径 } 3.使用，在需要使用的标签上面定义或者在css里面进行书写(推荐) ...
编写正则表达式，为html登陆页面 的密码增加验证功能，要求密码至少 8 个字符， 必须只包含字母(含大小写)、数字和特殊字符(键盘上所有特殊 字符)，并使用 zxcvbn 计算密码强度
最新发布
06-03
以下是正则表达式： ``` ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+=\-{}\[\]:;'"\\|,.<>\/?])(?!.*\s).{8,}$ ``` 解释如下： - `^` 匹配字符串的开头。 - `(?=.*[a-z])` 匹配任意位置的小写字母。 - `(?=.*[A-Z])` 匹配任意位置的大写字母。 - `(?=.*\d)` 匹配任意位置的数字。 - `(?=.*[!@#$%^&*()_+=\-{}\[\]:;'"\\|,.<>\/?])` 匹配任意位置的特殊字符。 - `(?!.*\s)` 不能包含任何空格。 - `.{8,}` 匹配任意 8 个或以上的字符。 - `$` 匹配字符串的结尾。 同时，为了使用 zxcvbn 计算密码强度，你需要在 HTML 登录页面中引入 zxcvbn.js 脚本文件，并在处理密码时调用 zxcvbn 函数进行强度计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值