前端引用字体

「爱情、让人受尽委屈。」 2022-05-30 09:55 182阅读 0赞

比如引用icomoon.io网上免费的字体：

1.选中需要的免费的字体：

![70][]

双击即选中，再次点击即取消

2.下载这些选中的字体：点击最下面的按钮：

![70 1][]，

点击即可看到你选中的字体：

![70 2][]

点击Download按钮即下载，等待下载完即下载完成

3.在页面引用，在你的项目创建font文件夹，将下载的资源里面中的fonts文件夹中的文件全部复制到你创建的font文件夹中，将style.css文件夹全部复制到你的全局样式中（记得是style.css文件中全部代码，否则会出现引用失败）：  
![70 3][]

①使用fontCreator编辑器打开icomoon.woff文件，可以看到具体的图标信息，及图标的名字（这个很重要）：

![70 4][]

②在你的全局样式文件中可以看到你添加的代码，（为啥是在全局样式文件中定义，以为你有可能其他页面都要引用）如：（正常的情况下名字都不用修改，直接在页面中引用下面字体的名字即可（如下面代码中字体的名字：icon - close））：

![70 5][]

③页面中引用：

![70 6][]

④完成：

![70 7][]

注意：如果引入的字体太小，可以通过css中的字体属性来改变该引用字体的大小

![70 8][]

[70]: /images/20220530/ee1e52ec14cc445e8985be347da2a09a.png
[70 1]: /images/20220530/82a858f3bc7c4f8494e2d61dd8e67d79.png
[70 2]: /images/20220530/13f28b4255b14e34810a144574d31f2f.png
[70 3]: /images/20220530/deb7381872da4bd785769795ea454561.png
[70 4]: /images/20220530/f751e86053924af6b8b413f24540d387.png
[70 5]: /images/20220530/63355ddff40544c6bdbaa107de76aa40.png
[70 6]: /images/20220530/40878eef1a26435f865eebbec5269cf7.png
[70 7]: /images/20220530/be2774b3e4f549c7ab2c90a3ee480f21.png
[70 8]: /images/20220530/7f5384b180f9412f95e66cc4a8bd7ab3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue引用外部字体

在 Vue 项目中引入外部字体非常简单。首先，你需要下载你想要使用的字体文件。然后，将这些字体文件放在你的项目中的某个文件夹中，比如 `assets` 文件夹。接着，在

雨点打透心脏的1/2处/ 2024年03月27日 12:08/ 0 赞/ 67 阅读

相关 iconfont symbol引用，展示彩色字体图标

1.去阿里巴巴图标库中找到自己的项目，选择symbol ，下载到本地。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

迷南。/ 2023年01月12日 11:59/ 0 赞/ 280 阅读

相关 html引用ttf字体文件

在样式表如此定义： @font-face { font-family: MyFontName;//自定义字体名称 sr

爱被打了一巴掌/ 2022年12月20日 02:09/ 0 赞/ 268 阅读

相关前端资源 - 字体 - 学习/实践

1.应用场景 <table> <tbody> <tr> <td>主要用于使用合适的字体, 进行前端项目的设计与开发.</td> </tr> </t

客官°小女子只卖身不卖艺/ 2022年12月13日 09:53/ 0 赞/ 153 阅读

相关 VUE项目引用外部字体

> 背景： > > web页面的UI设计时，常常会用到一些陌生又非常好看的字体，但是在开发过程中总是设置对应的字体名称却不生效，这就需要引用外部字体实现

川长思鸟来/ 2022年11月30日 04:17/ 0 赞/ 173 阅读

相关前端引用字体

比如引用icomoon.io网上免费的字体： 1.选中需要的免费的字体： ![70][] 双击即选中，再次点击即取消 2.下载这些选中的字体：点击最下面的按钮：

「爱情、让人受尽委屈。」/ 2022年05月30日 09:55/ 0 赞/ 183 阅读

相关前端使用的字体中英文对照

宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋

喜欢ヅ旅行/ 2022年04月18日 03:22/ 0 赞/ 258 阅读

相关 bootstrap字体图标引用

qq群： 581478349 <!DOCTYPE html> <html> <head> <title></titl

缺乏、安全感/ 2021年09月18日 13:50/ 0 赞/ 466 阅读

相关 nuxt引用iconfont字体图标

下载阿里巴巴矢量图标库：[https://www.iconfont.cn/][https_www.iconfont.cn] ![在这里插入图片描述][wat

墨蓝/ 2021年08月13日 23:52/ 0 赞/ 656 阅读

相关【前端】CSS 字体颜色渐变

HTML源码 <span class="valueStyle">15</span> CSS代码 .valueStyle{ ...

红太狼/ 2021年01月07日 12:40/ 0 赞/ 821 阅读