1

回归啦!这是见面礼:寒蝉!

 2 years ago
source link: https://blog.cyfan.top/p/93fc72ce.html?time=87307934846177250000
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

呜呜呜,经历了千万作业的压迫,一个学生终于摸到了久别的电脑。
转眼间就到2020了,我连个新年快乐都没说,差点都忘了自己还有博客。
细数一下这5个月发生的事:

  • php供应商不给我薅羊毛了,000webhost连续给我断掉了好几条。(¬︿̫̿¬☆),我再也不用你的服务了。后来断线1个月后转到了heroku,虽然有很多问题,勉强能用嘛。
  • 成绩不滑反而上涨了。(意料之外)
  • 5个月闲着没事用用Tor和I2P,顺便研究了一下DHT,倒有不少收获。新年将近,我会好好谈谈的。
  • 将博客上传方式由https转到了SSH,上传更快乐!

呜呜呜,抱着自己的电脑就是好啊……博客都不仅长草了,还长霉菌了 …

好了,进入正题吧。

寒蝉:用科学字体渲染科学文字

政治观念警告!

在博客简介里写的很清楚,在本站中没有任何政治倾向。如有,则本人是中华人民共和国 公民 人民,会坚定不移坚持党和国家的领导!
本人「东城渐觉风光好」2INdCH/IXVs2。 ,仅是为了学习用途!
请有心人注意你的言行!

「寒蝉」是一款Chrome浏览器扩展程序。安装该浏览器插件后,可以将网页中的特殊文本用科学字体来渲染。

这款插件…真的是…很适合我们这种「晴雪小园春未到」682Gc/27p5rz。使用啊!!!!

它,可以把一些关键词伪装成一些很正常的词语.

比如,我打入我爱跑路,经过寒蝉伪装,成「娇鬟堆枕钗横凤」Tdm31/2ceTfz。.

前面一句文言文,后面一堆软七八糟的东西,关键词过滤能过滤出来真的是才怪呢.

(官方文档)[https://github.com/guyujiezi/cicada/blob/master/README.md] 里写的很清楚了,自己去看吧。

底下是抄官方的:

  1. 前往 https://github.com/guyujiezi/cicada/releases 下载「寒蝉」最新版的压缩包;
  2. 找一个文件目录,将刚才下载的压缩包在此解压;
  3. 打开 Chrome 浏览器主菜单 > 更多工具 > 扩展程序,或直接在 Chrome 浏览器地址栏中访问 chrome://extensions/;
  4. 开启「开发者模式」;
  5. 点击「加载已解压的扩展程序」按钮,定位第2步解压的目录,点击「确定」。

由于Chrome 网上应用商店发布需要等待漫长的待审核状态,所以最新版会直接发布在 github 上,而Chrome 网上应用商店只会发布大版本更新。

如何使用?

扩展程序成功安装后,浏览器地址栏右侧会出现「寒蝉」的按钮。点击该按钮打开弹出窗口,输入你想加密的文本内容并提交:

「寒蝉」会随机生成一段诗词作为阴书内容。复制完整的内容,发布到论坛或其他地方,同样安装了「寒蝉」的用户将会看到你发布的真实内容。

那么,它是如何做到的??

官方文档中有说明其基于谷雨解字。官方文档显然讲的太繁琐了,以下是我略略简介:

我们浏览器中的字都是怎么出来的?

无论如何,你不可能直接在浏览器中显示字,除非是图片。

事实上,浏览器的字是这样显示的:;

  1. 我在这里写了个A。
  2. 实际上文档先会把它转成ASCII码65,然后询问我用的是什么字体,如果制定了,如微软雅黑;如果没指定,则默认用宋体。
  3. 接着,你看到了我的A,浏览器发现我用的是微软雅黑,就用微软雅黑的ttf 65号字,大概长这样:

否则大概是:

看懂了吗?

实际上,是字体改变了字的外观,对吧?

所以说,在字体上动点手脚,就可以让显示的字完全不一样呢!

https://npm.elemecdn.com/chenyfan-oss@1.0.0/pic/寒蝉/flow.png

而寒蝉,只不过是把最后一步作为插件,再把最后的密文发给服务器交其解密,最后回来阴文。

就这么简单。

官方文档:

网页字体格式
目前网络上使用的字体容器格式有四种: EOT、 TTF、 WOFF 和 WOFF2。 遗憾的是,尽管选择范围很广,但仍然缺少在所有新旧浏览器上都能使用的单一通用格式: EOT 只有 IE 支持,TTF 获得了部分 IE 支持,WOFF 获得了最广泛的支持,但在某些较旧的浏览器上不受支持,而 WOFF 2.0 支持对许多浏览器来说尚未实现。

那我们该怎么办?不存在在所有浏览器上都能使用的单一格式,这意味着我们需要提供多种格式才能实现一致的体验:

  • 将 WOFF 2.0 变体提供给支持的浏览器。
  • 将 WOFF 变体提供给大多数浏览器。
  • 将 TTF 变体提供给旧版 Android(4.4 版以下)浏览器。
  • 将 EOT 变体提供给旧版 IE(IE9 版以下)浏览器。
  • 注:从技术上讲,还有另一种容器格式,即 SVG 字体容器,但 IE 或 Firefox 从未为其提供支持,并且现在 Chrome 也放弃了对它的支持。 因此,它的用途很有限,本指南中有意将其忽略。

通过压缩减小字体大小
字体是字形的集合,其中的每个字形都是一组描述字母形状的路径。 各个字形不同,但它们仍然包含大量相似信息,这些信息可通过 GZIP 或兼容的压缩工具进行压缩:

EOT 和 TTF 格式默认情况下不进行压缩。 提供这些格式时,确保您的服务器配置为应用 GZIP 压缩。
WOFF 具有内建压缩。 确保您的 WOFF 压缩工具使用了最佳压缩设置。
WOFF2 采用自定义预处理和压缩算法,提供的文件大小压缩率比其他格式高大约 30%。 如需了解详细信息,请参阅 WOFF 2.0 评估报告。
最后,值得注意的是,某些字体格式包含附加的元数据,如字体提示和字距调整信息,这些信息在某些平台上可能并非必要信息,这样便可进一步优化文件大小。 查询您的字体压缩工具是否提供了优化选项,如果您这样做,请确保您有适合的基础架构来测试这些优化过的字体并将它们提供给每个特定浏览器。 例如,Google Fonts 为每一种字体维护有 30 多种优化过的变体,并自动检测和提供适合每一个平台和浏览器的最佳变体。
注:考虑使用 Zopfli 压缩处理 EOT、TTF 和 WOFF 格式。 Zopfli 是一种兼容 zlib 的压缩工具,提供的文件大小压缩率比 gzip 高大约 5%。

您可以通过@font-face CSS at-rule定义特定字体资源的位置、其样式特性及其应该用于的 Unicode 代码点。 可组合使用上述 @font-face声明来构建“字体系列”,浏览器将使用该系列来评估哪些字体资源需要下载并应用到当前网页。

格式选择
每个 @font-face声明都提供字体系列的名称,它充当多个声明的逻辑组、字体属性(如样式、粗细和拉伸)以及为字体资源指定位置优先级列表的 src 描述符。

@font-face {
    font-family:'Awesome Font';
    font-style: normal;
    font-weight: 400;
    src: local('Awesome Font'),
         url('/fonts/awesome.woff2') format('woff2'),
         url('/fonts/awesome.woff') format('woff'),
         url('/fonts/awesome.ttf') format('truetype'),
         url('/fonts/awesome.eot') format('embedded-opentype');
  }
  
  @font-face {
    font-family:'Awesome Font';
    font-style: italic;
    font-weight: 400;
    src: local('Awesome Font Italic'),
         url('/fonts/awesome-i.woff2') format('woff2'),
         url('/fonts/awesome-i.woff') format('woff'),
         url('/fonts/awesome-i.ttf') format('truetype'),
         url('/fonts/awesome-i.eot') format('embedded-opentype');
  }

首先,请注意以上示例使用两种样式(normal 和_italic_)来定义单个 Awesome Font 系列,其中的每个样式均指向一个不同的字体资源集。 每个 src 描述符则又包含一个用逗号分隔的资源变体优先级列表:

local() 指令用于引用、加载和使用安装在本地的字体。
url() 指令用于加载外部字体,它可以包含可选的 format() 提示,指示由提供的网址引用的字体格式。
注:除非您引用的是其中一种默认系统字体,用户很少将其安装在本地,特别是在移动设备上,在移动设备上“安装” 附加字体实际上根本无法实现。 您始终应该从“以防万一”的 local() 条目入手,然后提供一个 url() 条目列表。

当浏览器确定需要字体时,它会按指定顺序循环访问提供的资源列表,并尝试加载相应的资源。 例如,接着上面的示例:

浏览器执行页面布局并确定需要使用哪些字体变体来渲染网页上的指定文本。
对于每一种必需字体,浏览器会检查字体文件是否位于本地。
如果字体文件不在本地,则浏览器会遍历外部定义:
如果存在格式提示,则浏览器会在启动下载之前检查其是否支持提示。 如果浏览器不支持此提示,则会前进到下一格式提示。
如果不存在格式提示,则浏览器会下载资源。
您可以将本地和外部指令与相应的格式提示相结合来指定所有可用字体格式,其余工作交由浏览器进行处理。 浏览器确定需要哪些资源,并选择最佳格式。

  • 注:字体变体的指定顺序很重要。 浏览器将选取其支持的第一种格式。 因此,如果您希望较新的浏览器使用 WOFF2,则应将 WOFF2 声明置于 WOFF 之上,依此类推。

优化加载和渲染
与普遍的观点相反,使用网页字体不需要延迟网页渲染,也不会对其他性能指标产生不良影响。 在充分优化的情况下使用字体可大幅提升总体用户体验:出色的品牌推广,改进的可读性、易用性和可搜索性,并一直提供可扩展的多分辨率解决方案,能够出色地适应各种屏幕格式和分辨率。 不要害怕使用网页字体!

不过,直接实现可能招致下载内容庞大和不必要的延迟。 您需要通过对字体资产本身及其在网页上的提取和使用方式进行优化来为浏览器提供协助的环节。

审核并监控您的字体使用情况:不要在网页上使用过多字体,并且对于每一种字体,最大限度减少使用的变体数量。 这将有助于为您的用户带来更加一致且更加快速的体验。
对您的字体资源进行子集内嵌:许多字体都可进行子集内嵌,或者拆分成多个 unicode-range 以仅提供特定网页需要的字形。 这样即可减小文件大小,并提高资源的下载速度。 不过,在定义子集时要注意针对字体重复使用的情况进行优化。 例如,您一定不希望在每个网页上都下载不同但重叠的字符集。 最好根据文字系统(例如拉丁文、西里尔文等)进行子集内嵌。
向每个浏览器提供优化过的字体格式:每一种字体都应以 WOFF2、WOFF、EOT 和 TTF 格式提供。 务必对 EOT 和 TTF 格式应用 GZIP 压缩,因为默认情况下不会对其进行压缩。
在 src 列表中优先列出 local():在 src 列表中首先列出 local(‘Font Name’) 可确保不会针对已安装的字体发出 HTTP 请求。
使用、font-display 或 Font Loading API 来自定义字体加载和渲染:默认的延迟加载行为可能会导致延迟渲染文本。 您可以通过这些网络平台功能为特定字体替换这一行为,以及为网页上的不同内容指定自定义渲染和超时策略。
指定重新验证和最佳缓存策略:字体是不经常更新的静态资源。 确保您的服务器提供长期的 max-age 时间戳和重新验证令牌,以实现不同网页之间高效的字体重复使用。 如果使用 Service Worker,则适合采用缓存优先策略。

那么,他有什么用呢?

很简单,为了防止关键字过滤,本博客简单采用这种方法减少被封的概率。

不过为了防止对手机用户的干扰,我只对关键词语掩护。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK