Firefox禁止远程字体加速网页加载及图标字体补充安装

这篇具有很好参考价值的文章主要介绍了Firefox禁止远程字体加速网页加载及图标字体补充安装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

禁止远程字体的作用

作为程序员,日常工作中我们可能经常需要打开国内外许多不同的网站寻找教程,但是很多国外网站,特别是基于WordPress的博客,往往会使用Google字体,这是使得我们访问这些网站的时候会自动尝试加载这些字体,而严重影响打开速度。这时候我们可以考虑禁止所有的远程字体以加速访问。虽然这样会影响所有网站的字体显示,但如果本地安装了Noto系列等优秀的字体,几乎不会因此遇到常规中英文、emoji的显示问题。强制使用本地字体代替远程显然对任何相关网站都能起到加速作用。

禁止远程字体的方法

  1. 在地址栏输入about:config打开配置
  2. 搜索gfx.downloadable_fonts.enabled,将其值改为false即可

这样会强制禁止网页下载远程字体,而使用本地字体代替。其他的一些相关配置,如在字体设置中取消勾选“允许网页选择字体”等,似乎只能改变字体的显示,无法起到禁用字体下载以加速的作用。

图标字体无法显示问题及解决方法

虽然绝大部分的字符可以显示,但是有一类比较特殊,就是所谓图标字体(icon font)。前端开发可能对它比较熟悉,我自己的理解就是一类特殊的Unicode字符,需要有特定的字体支撑,而往往不能用另一种图标字体来替代,在实际操作中一般假定用户没有安装相应的字体,而是通过CSS的@font-face等方式来加载远程字体文件。这样的字体在本地安装了相应的字体文件后,可以正常显示,但是如果没有安装,同时又禁止了远程字体,就会显示为方框,里面有4位十六进制的编码。下面,我们以苹果中文官网为例,如果禁用了远程字体,主页的部分显示是这样的:

Firefox禁止远程字体加速网页加载及图标字体补充安装

考虑到图标字体出现的次数并不多,其实它们可能并不会过度影响阅读。但是,如果比较注重网页的完美显示,或者需要经常访问某些网页,一直缺失这些字符显然不能令人满意。为此,我们可以主动确认并安装这些字体。

在修复某个具体的页面时,我们首先要把gfx.downloadable_fonts.enabled暂时重新设置为true,F12打开相应页面的开发者工具,切换到网络选项,然后刷新页面,这样就会自动下载相应的字体文件。运气足够好的话,网页直接传输.ttf字体文件,那我们直接安装就可以,然而,也有一些网页选择传输.woff.woff2文件,比如苹果官网主页,如图所示:

Firefox禁止远程字体加速网页加载及图标字体补充安装

我们可以无视一般的字体文件,只寻找并下载图标字体,如这里很明显就是名字里带icon的两个。然后使用woff2解码工具解码,得到.ttf文件,再安装即可。这里我使用的是Google开发的woff2,Gitee上已有一个似乎是个人备份的源码仓库https://gitee.com/invictusjz/woff2-git?_from=gitee_search,直接下载安装包按照README使用即可。得到ttf后一样点击安装,再次关闭远程字体后,就依然能正常显示图标字体了:

Firefox禁止远程字体加速网页加载及图标字体补充安装

除此以外,我们还可以主动储备一些常用的图标字体,从而不需要每次都分析网页请求并下载。一个可供参考的列表是https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts。注意其中的Font Awesome Pro似乎已经失效,需要另外寻找备份。提前安装这个列表可以提前解决很多网页的图标字体显示问题。

本文由博客一文多发平台 OpenWrite 发布!文章来源地址https://www.toymoban.com/news/detail-825081.html

到了这里,关于Firefox禁止远程字体加速网页加载及图标字体补充安装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序静态资源及字体图标

            app.wxss定义全局样式,该文件中的样式会在所有的页面生效。         注:page在每个页面都有,相当于html中的body标签。         .wxss文件不支持使用本地路径的资源(图片,字体库),必须使用网络资源(以http或https开头)或转换为base64编码使用。         

    2024年02月22日
    浏览(38)
  • 火狐浏览器提示“无法加载您的Firefox配置文件”解决方法

    火狐浏览器提示“无法加载您的Firefox配置文件”解决方法分享。最近有用户在电脑开启火狐浏览器来使用的时候,软件出现了一个问题,提示无法加载Firefox配置文件。这样导致浏览器无法正常的使用了。那么如何去快速的处理这个问题呢?一起来看看以下的处理方法吧。 解

    2024年02月11日
    浏览(103)
  • 微信小程序使用字体图标——链接引入

    目录 1.下载字体图标  1.选择需要的图标加入购物车添加到项目 2.查看项目  3.生成在线链接   4.复制生成的链接 等下放到iconfont.json中​编辑 2.引入链接 1.下载  2.生成iconfont.json文件 3. 在iconfont.json中 放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

    2024年02月16日
    浏览(227)
  • CSS学习(3) - 轮廓文本和字体图标

    文章首发于我的个人博客:欢迎大佬们来逛逛 轮廓是在元素的周围绘制一条线,用于修饰元素框。 CSS 拥有如下轮廓属性: outline-style outline-color outline-width outline-offset outline outline-style 用于设置轮廓的样式: dotted - 定义点状的轮廓。 dashed - 定义虚线的轮廓。 solid - 定义实线的

    2023年04月20日
    浏览(42)
  • 【Web前端开发基础】CSS3之Web字体、字体图标、平面转换、渐变

    1.1 Web字体概述 每种字体都对应着相应的字体文件,没有 @font-face 规则之前,客户端是否能够正确显示 fontfamily 规定的字体,是由该字体的文件是否预装在客户端决定的。而 @font-face 规则可以将字体文件存放在服务器端,渲染页面时客户端请求从服务器端下载改字体文件进行

    2024年01月25日
    浏览(63)
  • vant自定义引入iconfont图标以及字体

    因为vantUI给的图标非常少,为了满足自己的需求,必须自定义图标,这里分享一种vant引入阿里的iconfont矢量图库中的图标的方法 第一步:去阿里矢量库下载图标 点击资源管理—我的项目 —新建项目  在首页搜索需要的图标添加至自己的项目中  第二步:把项目下载到本地,

    2024年02月12日
    浏览(55)
  • 【Webpack】处理字体图标和音视频资源

    打开阿里巴巴矢量图标库open in new window 选择想要的图标添加到购物车,统一下载到本地 src/fonts/iconfont.ttf src/fonts/iconfont.woff src/fonts/iconfont.woff2 src/css/iconfont.css 注意字体文件路径需要修改 src/main.js public/index.html type: \\\"asset/resource\\\" 和 type: \\\"asset\\\" 的区别: type: \\\"asset/resource\\\"  相当于

    2024年02月20日
    浏览(52)
  • 字体图标与雪碧图(精灵图)的设计应用

    一、CSS雪碧图(精灵图)的介绍 CSS雪碧图(又称为精灵图)是一种基于CSS3的动画效果,它可以让元素在不同的状态下呈现出不同的视觉效果,具有很强的动态和视觉效果表现能力。 雪碧图是通过动画算法,在CSS中将一个元素在不同的时间点展示不同的样式来实现的。通过控

    2024年02月04日
    浏览(25)
  • 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库

    好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1、字体图标 方法一、本地使用通过类名使用阿里矢量图标 1、把图标添加入库 2、把图标添加到项目  3、下载字体图标 4、使用文件 5、在对应的HTML页面上引入css 6、使用字体图标

    2024年02月16日
    浏览(87)
  • js网页禁止鼠标右键

    作为小小程序员,有时候是不是不想让别人在浏览器右键看到自己写的源码,下面我就来教大家一段非常非常 实用且简便 的代码, 禁止鼠标右键的一切操作包括键盘F12 ,极大的极大的增加了我们 代码的保密性 , 直接 把代码 粘贴到js中 就可以实现...... 下面就让我们一起看

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包