【记录篇】—— web字体的相关

开始。因为负责站点主style样式的编写，所有的需要的字体引入由我负责，因为一些原因只能自己在网上下载字体文件引入，条件允许是可以找设计师要字体，或让他们提供可以下载相应字体的地址的。QAQ

这里贴个我用来找字体的网址，供大家参考：

字客网：https://www.fontke.com/

注：这次字体主要来源于该站，资源丰富，真的很全，能满足大家的需求。

字体下载网：http://www.font168.com/

注：站如其名，字体下载。

站长之家-站长素材模块：http://font.chinaz.com/

注：作为一个前端搬砖人员，业务有偏向个人站点开发，这个站真的香。

字由网：https://www.hellofont.cn/home

注：官方定义为设计师量身定做的一款字体工具，设计师可以通过收藏、搜索、标签、案例等快速找到心仪的字体，并在设计软件中无缝使用这些字体。这个之所以最后推荐是因为有会员机制，如果你是设计师你一定知道这个，但我不是。啧啧啧！

过程。下载到相应字体，格式otf，上传，fontface引入，却发现并不生效并且开始本地我并没有进行demo测试，每个文件大小10M以上导致页面加载线长，响应速度慢。后来经本地测试发现不生效，于是重新下载字体，本地测试遂成功。但是字体文件依然很大，着手压缩字体文件。

这里我主要通过两种方式解决，供大家参考：

字蛛：http://font-spider.org/

注：一个node的依赖工具，通过ttf格式的字体文件获取生成兼容不同浏览器的文件。

Fontmin：https://ecomfe.github.io/fontmin/#feature

注：这个没怎么用，之后时间再研究。【斜眼笑】

兼容处理：（知识盲区，之前没做过还以为用UA判断端设置默认字体.）

1.上面提到的字蛛不仅可以压缩包括也兼容，但必须有ttf格式的字体文件，但网上能很容易下载到。或通过字客网的在线转化https://www.fontke.com/tool/convfont/?fromlang=zh_CN，转成ttf格式。

2.字客网的@font-face生成器 https://www.fontke.com/tool/fontface/，干净利索。

最后。就这样瞎折腾，算是解决了。强调我不是恰饭的，我是一位工地的一名搬砖人员，擅长面向百度，面向复制粘贴编程。再聊！

【记录篇】—— web字体的相关相关推荐

【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标前言一. ...
日志分析篇---Web日志分析
日志分析篇-Web日志分析文章目录日志分析篇---Web日志分析一. web日志二.日志分析技巧三.日志分析案例 1.定位攻击源 2.搜索相关日志记录 3.对找到的访问日志进行解读,攻击者大 ...
web使用字体包_如何使用跨浏览器Web字体，第2部分
web使用字体包介绍 (Introduction) In part 1 of my article (https://www.sitepoint.com/how-to-use-cross-brows ...
【JS 逆向百例】吾爱破解2022春节解题领红包之番外篇 Web 中级题解
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 逆向目标本次逆向的目标来源于吾爱破解 2022 春节解题领红包之番外篇 Web 中级题,吾爱破解每年都会有派送红包活动(送吾爱 ...
自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的出现一个白色框即字体失效的检查: ①路径那里是不是fonts文件夹的第一子路径就是全部的文件. ②/+unicode编码和转义编码有没有弄棍 (一个给c ...
web设计经验七13步打造优雅的WEB字体
今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...
web字体设置成平方字体_如何托管自己的Web字体
web字体设置成平方字体字体通常是许多计算机用户的谜. 例如,您是否设计了一个精美的传单,并且将文件放在某个地方进行打印时,发现Arial中呈现的所有标题是因为打印机没有您在设计中使用的精美字体? ...
web字体设置成平方字体_探索免费和开放的Web字体
web字体设置成平方字体毫无疑问,近年来,开源字体已经改变了网络的面貌. 在2010年之前,您可能会在网络浏览器中看到的唯一字体是Microsoft的通用"网络安全" 核心字体 ...
WEB字体,多列布局和伸缩盒
WEB字体语法 @font-face{font-family:"";src:url() format()... } 兼容性写法 @font-face {font-family: ...

【记录篇】—— web字体的相关

【记录篇】—— web字体的相关相关推荐

最新文章

热门文章