在上一篇文章中，我引入了 TTF 格式的字体文件来解决各平台字体表现不统一的问题。
日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的，甚至有时候一个字体比其他所有的资源（js、css、图片）加起来还要大，对网页的加载性能起到非常关键的影响，因此有必要对字体进行一些优化。 本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。
之前有人给我提了个需求，让我去看看猫眼专业版，字体反爬问题，我觉得有趣，因为之前没学过字体反爬。然后，就尝试去搞了一下，结果当时因为xx原因，放弃了。也是实力不够啊！后来，也就是昨天，又想起来了，这个遗留问题，就来尝试学习学习，本文将以猫眼专业版网站为例，深入研究字体反爬问题。
其中@font-face相当于创建一个字体族，然后下边body部分是在应用字体族，那个名字其实就是在前边创建的字体的名字。 通过在网络上的查找，我首先选择使用的是Robot字体，这个字体族写的英文字体相当漂亮:
下载自己喜欢的字体，字体格式为.ttf。我们可以到第一字体网去下载http://www.diyiziti.com/
注意：~@/ 是 Vue CLI 项目中常用的别名，它指向 src 目录。但在 UniApp 中，可能需要直接使用相对路径或绝对路径。确保路径指向字体文件。
下载自己喜欢的字体，字体格式为.ttf，这里推荐一个字体网站：http://www.zhaozi.cn/s/all/ttf/http://www.zhaozi.cn/s/all/ttf/
可能有一些小白看到一些大佬的博客会发现为啥别人的网站字体和自己不一样，自己网站的字体和大佬的一对比就感觉啥都不是，所以今天阿浩就来教一下大家JOE主题怎么自定义网站字体（本教程只适用于Typecho博客程序的JOE主题，其他博客程序或其他主题请自行寻找解决办法）
这篇文章是公众号《云爬虫技术研究笔记》的《2019年末逆向复习系列》的第六篇：《从猫眼字体反爬分析谈谈字体反爬的前世今生》
有很多时候，Wordpress 的字体不能让我们满意，这个时候我们就可以通过一些方法来修改主题的默认字体，来达到我们想要的效果。
随着当前 Web 技术的日新月异，网页界面内容越来越丰富，让人眼花缭乱，其中就包括了网页中的各种自定义字体。
这是官方开放开发文档，大家可以自行下载，不过 ttf 字体文件太大，有 8M 左右，导致网站加载资源时间较长，将 ttf 转换成 woff 文件（4.3M）左右，我已经将 ttf 和 woff 文件都上传到 jsdeliver 上了，大家最后引用一下就可以了！ （jsdeliver国内许可证掉了，失去国内节点加载变慢。替换「//cdn.jsdelivr.net」为「//jsdelivr.panbaidu.cn」）
通过CSS属性@font-face和font-family可以实现加载自定义web font，改变网页字体，实现美化效果。
CSS代码 @font-face { font-family: "zidingyi"; src: url("woff2字体链接") format("woff2"), url("woff字体链接") format("woff"), url("ttf字体链接") format("truetype"), url("eot字体链接") format("embedded-opentype"), url("svg字体链接") format(
一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。
注释: 其中font-family: ‘xxx’; 中的 xxx 字体名称(可随意命名,需要与使用时的名字保持一直)
有些网站需要加载谷歌字体，由于网络问题或者某些问题，fonts.googleapis.com访问太慢会导致站点加载很慢。虽然最后能看到网站，但实际上谷歌字体依然加载失败了，这个体验就非常差劲了。
起初看到这个字体的时候是在@THYUU老哥站点上看到的，当时看到他这个主题的时候，就感觉莫名的不一样，可能跟字体有很大的关系吧. 当时也没太注意，直到昨天在某群看到一个站点，点进去一看，感觉都不一样的，字体很是突出，真的让我明显感知到了字体笔画的优化，和其他字体相比起来，的确是削弱了黑体的机械感，字形易认，辨识度更高. 于是就决定给我主题也换上这个字体看看，通过了解，需要先到官方文档下载字体. 为了方便引用 我干脆直接上传到了我的GitHub 并通过jsdelivr进行CDN加速： https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2 最后打开样式文件添加以下代码：
众所周知，相对于英文字体，中文字体天生是“庞然大物”。英文字体两三百KB已经很大了，而中文字体几MB十几MB都算小的。一方面，中文字体包含的字形数量极多，动辄数以千计甚至万计，而英文字体则只需包含几十个基本字符和符号，哪怕支持多种语言及字符变体，容量达到三千多个字形已经算非常庞大的了。另一方面，中文字形的曲折变化复杂度高，在基于轮廓的矢量字体设计中，用于控制中文字形曲线的控制点普遍比英文更多，因而需要的数据量更大，也会导致字体文件膨胀。
字体反爬也就是自定义字体反爬，通过调用自定义的字体文件来渲染网页中的文字，而网页中的文字不再是文字，而是相应的字体编码，通过复制或者简单的采集是无法采集到编码后的文字内容的。
博客改了一下字体，字体放在了腾讯OSS里，好家伙，这下肯定比把字体文件放本地好多了，下面简单记录一下改字体的过程，其实不复杂，就是在那个字体跨域废了点时间，主要还是我菜，但是经过折腾后发现，还是把选择把字体文件存在github仓库里比较好，各位自行选择吧。
该站点也是字体反爬经典案例，其呈现不是以乱码形式展现，而是源码差异，具体如下图所示。
HI，五一玩的怎么样？除了人山人海，高速堵车，高铁全是人之外其他都还好啦，是不是，哈哈哈~~~好了，不闹了，在假期有朋友问我，想要修改网页的字体怎么办？怎么更换网页的字体，又如何引用自定义字体呢？其实很简单，今天简单写个教程，需要能给小白一丢丢的帮助吧。
(adsbygoogle = window.adsbygoogle || []).push({});
在前端作业中，二十年前只有页面中铺满文字就算上线产品，现如今，不加点俏皮的“图标”会让页面显得很 Low 很 Low。
现在想要在CSS中使用自定义字体或者第三方字体，是一件非常简单的事情，只需要简单的使用@font-face规则即可导入各种字体文件。
很久之前写过windows20008服务器无法加载woff文件的问题，文章是：解决网站部署svg/woff/woff2字体404错误的方法，今天来说下Nginx无法加载woff的问题，我目前使用的是程序是lnmp，宝塔控制面板，使用的TP5，但是在后台访问的时候无法加载woff文件，页面提示502 bad gateway，使用f12查看开发者信息，所有的woff都是502，所有页面的小图片均已无法显示，如图：
我们在上一篇文章 《破解大众点评的字体加密》中提到了，大众点评只是静态字体加密，这次我们抱着学习的态度以猫眼电影为例讲讲如何破解字体动态加密。
本文分为三个部分：字体加载、字体交付和字体呈现。每一节都解释了字体生命周期的那个特定方面是如何工作的，并提供了相应的最佳实践。
主题的标题字体太大，试了很多方法，标题字体大小始终调整不了。网上也找了很多方法，均不灵验。最终于找到一段CSS代码，添加到主题自定义，设置CSS选项里，确定后字体大小，再根据自己网站适量自己调整。
api/match/7返回的json数据，里面data数组有10个字体（胜点） 和 woff文件的地址。
Background 今天在浏览一个网站的时候，发现了一款非常好看的字体，审查元素发现，这个字体叫Open Sans，非常惊艳。和我以前发现的一款字体Segoe UI非常像。对比了一下，其实都很不错，而且很相像。于是Google了下，竟然发现其实这两款字体出自同一人Steve Matteson之手！真是大神级的人物。看来的我的欣赏水平还没有跑偏。 不同的是，Segoe UI属于微软的东西，付费，而Open Sans是免费的。 刚好自己最近在做网站开发，于是就想把这款字体嵌入到自己正在做的网页里。今天就写一下
首先是字体：如果把想要的字体引入到网页。 第一步：下载字体文件，一般下载到的是.TTF文件，只有一个文件。 第二步：把下载的字体，转换为其他格式，一般为了解决兼容性需要4-到5种文件格式，转换字体文件的程序比较多。比如这个网站http://www.freefontconverter.com/，都是免费转换一下。 第三步：把字体文件放在项目工程目录下，引入， @font-face { font-family: 'a';/*这个地方设置字体的名称*/ src: url('font2/cynicalhill
今天看到主题作者主页大标题用了这个字体，我一想哇还挺好看，也想自己整一个，看了看主题设置并没有更改字体的设置，只有头部标签引用,又回头看了看原页面，注意到了这两行代码，翻遍了他所有的评论知道这个字体叫方正粗金陵繁体
本文仅从技术层面进行讨论，在使用程序获取互联网上数据时，请务必遵守数据提供方的使用协议，以免造成侵权。
Demo 可以参考：http://idv3.sinaapp.com 中标题字体的用法，具体用法如下：
最近在使用 IIS 发布 PHP 网站时，我遇到了一个前端问题，即字体库文件 404 错误。这个问题的根本原因是 IIS 未能正确识别字体文件类型，导致浏览器在加载页面时无法正确获取所需字体资源，进而触发了404错误。这样的问题会导致网站页面的显示不正常，影响用户体验。
Python现在非常火，语法简单而且功能强大，很多同学都想学Python！所以小的给各位看官们准备了高价值Python学习视频教程及相关电子版书籍，欢迎前来领取！
今天在优化主题的时候遇到的问题，发现字体文件的体积实在是太大了，即便是使用了cdn作为缓存，但是加载的时间还是过于久，会导致拖慢了全站的加载速度，于是便将字体样式通过异步加载的形式，让其不拖慢网站的加载速度。
在前几天的文章中，我针某点评商家搜索页面的字体反爬给出了解决方案，但是还有一个问题，那就是当时给出的方法是下载对应的woff字体文件，然后建立加密字体与编码之间的映射关系来进行破解。
WOFF格式 WOFF文件格式是用WOFF (Web Open Font Format)创建的网页开放字体格式， Web开放字体格式（Web Open Font Format，简称WOFF）是一种网页所采用的字体格式标准， 保存一个压缩的容器中，支持TTF(TrueType)字体和OPT( OpenType)字体，
*bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用 *bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了，下面的文件同样。
文章里介绍了几个大的网站，在反爬虫过程中，采取的各式各样的策略，无不体现出前端工程师的奇葩脑洞。
https://www.giftofspeed.com/base64-encoder
定义好字体之后，在需要使用的元素上，直接加font-family就可以了，值需要跟定义的名字一致
@font-face是用于在网页上加载自定义字体的CSS规则。它允许开发人员使用自己的字体文件来显示文本，而不仅限于浏览器默认提供的字体。
Web 项目中，使用一个适合的字体能给用户带来良好的体验。但是字体文件这么多，如果设计师或者开发人员想要查询字体，只能一个个打开，非常影响工作效率。我负责的平台项目刚好需要实现一个功能，能够支持根据固定文字以及用户输入预览字体。在实现这一功能的过程中主要解决两个问题：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
