首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

zblog开启https后台不显示字体图标,提示“拒绝加载字体”错误的解决办法

之前给客户处理问题的时候发现他的网站没有开启https功能,也就是我们所谓的SSL证书,当时并没有在意可能觉得是服务器主机没有设置正确导致的,但是我的测试站因为SSL证书到期之后也出现了“Refused...'font-src' was not explicitly set, so 'default-src' is used as a fallback.”的提示,如图: 如图所示,翻译成中文提示“拒绝加载字体...请注意,显式设置“font src”,因此使用“默认src”作为回退。”...最初我也以为是服务器设置问题导致不能加载字体文件,于是乎我在NGINX服务加上了字体的格式,如图: 因为我很清醒的记着在win服务器里面,需要在IIS服务器上添加MIME类型,但是Linux我记得不需要...,所以这个操作没有意义,设置完成后重载、重启Nginx服务器都是无效的,后来还特意百度了下http网站是否可以加载https资源,得到的答案是肯定滴,但是https不能加载http资源,这点好理解,但是后台为什么一直提示错误呢

1.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    uniapp设置字体引入字体格式

    */ src: url('~@/static/fonts/MyFont.woff') format('woff'), /* 注意路径可能需要根据你的项目结构进行调整 */ url...确保路径指向字体文件。在样式中使用字体:一旦定义了字体,就可以在 CSS 中使用它了。...如果你的项目使用了构建工具(如 Webpack),可能需要配置以正确处理字体文件。但在 UniApp 中,这通常不是必需的,因为 UniApp 有自己的构建和打包流程。...如果你在 H5 平台上使用自定义字体,并希望优化加载性能,可以考虑使用字体加载策略(如字体子集化或按需加载)。请注意,这些策略可能不适用于所有平台或构建目标。...虽然大多数现代浏览器和平台都支持 Web 字体最好还是在你的目标平台上测试自定义字体的表现。特别是对于小程序平台,由于平台的限制和差异,可能需要额外的步骤或配置来使用自定义字体

    95010

    个人主页重新设计改版,中途却遇到两个难题...

    没有挫折就没有动力嘛~ 问题一:字体文件太大拖慢网页加载速度(已解决) 整个字体包大小 11M,我云服务器上行带宽最多跑个 1M 左右,那加载字体就得 10s 左右,以这速度谁还看我网站,,,崩溃。。...最终确定一个解决办法,通过蜘蛛爬取网页字体。 下面是我总结并完善后的方法。 字蛛(font-spider)压缩字体 1....nodejs.org/en/download/ 安装的时候选择 add to PATH 这样 node npm 模板都安装了 安装完毕后,打开cmd命令窗口,依次输入命令: node -v npm -v 如果正确输出版本号...运行字蛛 压缩前 /* 我的CSS样式 */ @font-face {        font-family: WangWei;        src: url("wangwei.ttf...256 色,mp4 转 gif 画面的分辨率虽然不变画质有很大损失,上图能看到明显的像素块效果。

    1.1K20

    浏览器之性能指标-CLS

    通过设置宽高比,可以让图片自适应容器的尺寸变化,并保持正确的比例。 避免布局偏移:使用正确的宽高比可以避免在图片加载过程中发生布局偏移。...如果在图片加载前没有指定宽高比,浏览器可能无法正确预留图片所需的空间,导致页面布局在加载后发生突然变化。...❝FOUT代表"Flash of Unstyled Text",意为「样式化文本的闪烁」。...---- 使用font:display值和link rel=preload 如果我们的网站使用外部托管的字体,它们可能是FOIT(闪烁的不可见文本)和FOUT(闪烁的样式化文本)的主要原因。...使用font-display: swap;:这将在字体加载完成之前显示备用字体,然后在字体加载完成后再切换为所需的字体

    85720

    前端 Web 性能清单

    example.com"> . dns-prefetch 的工作方式与 preconnect 完全相同,具有更广泛的浏览器支持...确定关键代码后,将该代码从呈现阻止 URL 移动到 HTML 页面中的内联脚本标记。 在 HTML 页面头部的样式块中内嵌第一次绘制所需的关键样式,并使用预加载链接异步加载其余样式。...在 webfont 加载期间所有文本仍然可见 利用字体显示 CSS 功能确保文本在加载网络字体时用户可见。...例如,对于 Google 字体,只需将 &display=swap 参数添加到 Google 字体 URL 的末尾即可: <link href="https://fonts.googleapis.com...document.write() 对于连接速度较慢的用户,通过 document.write() 动态注入的外部脚本会使页面<em>加载</em>延迟数十秒。 非合成动画 <em>未</em>合成的动画可能很重并会增加 CLS。

    88530

    使用CSS提高网站性能的30种方法

    该文件稍大,只需要一种字体而不是多种字体。 8. Host font files locally 引用Google字体很容易,额外的DNS查找、生成子集和跟踪使用情况会带来性能成本。...您还应该在CSS中定义适当的字体显示加载选项。以下选项可提供明显的性能提升: 互换:使用第一个备用OS字体,直到Web字体可用。...然后使用Web字体(如果可用)。否则,它将恢复为交换。 可选:与回退相同,只是在下载Web字体后不进行字体交换。它应该出现在下一个页面加载。...该确保在启用JavaScript的情况下仍然加载: 都是呈现阻止的,每个文件不应超过几千字节。 较旧的浏览器可能会显示一个空白页面,直到所有CSS都加载完毕,总体影响应该不会比一个大的呈现阻塞样式表更糟。

    3.4K20

    2020前端性能优化清单(二)

    例如,服务人员可以向请求添加新的客户端提示标头值,重写 URL 并将图像请求指向 CDN,根据连接性和用户首选项调整响应,等等。它不仅适用于图像资源,而且适用几乎所有其他类型的请求。...是的,与图像不同,浏览器不会预加载 内容, HTML5 视频往往比 GIF 更轻,更小。没有选择吗?...虽然 HEIF 和 HEVC(H.265)还不可以正确显示在 web 网页上(或许您读这篇文章的时候可能已经不是这样了?), AV1 已经可以 -- 并且正在不断获得浏览器支持[66]。...首先要问的一个问题是,您是否可以摆脱使用UI 系统的字体[76]的麻烦?再次检查它们在各种平台上的显示是否正确[77]。如果不是这种情况,您提供的网络字体很有可能会包含字形以及使用的额外功能和粗细。...使用 preconnect 可以更快地进行跨域字体请求,请谨慎使用预加载,因为从不同源预加载字体会引发网络争用。所有这些技术都在 Zach 的Web 字体加载食谱[95]中进行了介绍。

    1.7K10

    Web测试检查清单

    众多的软件产品在交易量不大时都可以正常运行,一旦交易量增大,会出现各种各样的问题,比如交易响应时间会急剧增加甚至导致无法完成交易的情况,更严重的可能导致整个系统瘫痪。...、导航 1、检查滚动条在需要时是否能正确显示 2、验证网页上的所有操作均可以通过键盘操作完成 3、面包屑导航是否存在 4、确保在保存当前页面时离开页面有用户提示信息 3.2、链接 1、检查站点地图中的所有链接并查看是否存在损坏的链接...1、确保整个网页产品中字体设置的一致性 2、确保字体放大时页面布局不被破坏 3、确保所有字体设置的易读性 4、确保不同类型内容在同一页面显示时尽量选用不同字体 4、内容、图片、按钮 4.1、内容 1、...,只有知道正确URL地址才能访问) 4、测试链接URL地址是否符合要求,测试需要登录后才能访问的页面URL是否泄漏用户的相关信息 5、检测需要用户登录后才可访问的URL地址,直接在登录状态下通过输入访问是否可以访问成功...4、背景颜色应该与字体颜色和前景颜色相搭配 5、图片的大小和质量也是一个很重要的因素,一般采用JPG或GIF压缩 8.3、内容测试 1、检验Web页面提供信息的正确性、准确性和相关性 2、检验web页面内容显示的合理性

    1.6K10

    CSS3魔法堂:认识@font-face和Font Icon

    src :设置字体加载路径和格式,通过逗号分隔多个加载路径和格式 srouce :字体加载路径,可以是绝对或相对URL。...src属性后还有一个 local(font name) 字段,表示从用户系统中加载字体,失败后才加载webfont。...由于中文字体太大,因此建议若中文LOGO还是使用图片。而英文LOGO则可使用@font-face代替图片;   3. @font-face无效有可能是字体加载路径错误;   4....这类符号实体是固化在浏览器中,没办法对其进行自定义,所以我们往往会使用图片来代替。...不过通过@font-face来实现的Font Icon,我们可以自定义并使用各种符号实体——这些符号实体正确来说应该叫做Web实体符。

    2K80

    【腾讯云前端性能优化大赛】秒开的艺术:Hexo 博客首屏耗时优化实践

    ,浏览器重新请求服务器,服务器上的文件实际上没有发生变化。...我们可以只将页面需要用到的文字从完整的字体文件中裁剪出来,生成字体的子集(subset),从而优化字体加载和展示体验。...前面的优化手段针对的是单次页面访问的优化,访客访问一个站点往往是一个连续的过程,也就是说一位访客进入首页后,如果他对这个网站的内容感兴趣,很有可能通过页面上的超链接继续访问网站的内页。...IntersectionObserver 监听出现在浏览器视口中的 标签 等待浏览器空闲(通过 requestIdleCallback 注册回调) 向页面插入 (这会指示浏览器请求该 URL,从而缓存 URL 指向的资源) 这样,在访客点击超链接跳转到博客的内页之前,这个页面的 HTML、CSS 和 JS 文件应该都已经在浏览器的缓存里面了,页面跳转时的网络请求时间开销被极大降低

    936141

    CSS 20大酷刑

    替代JPEG和PNG,受到浏览器支持限制,提供更小的图像文件。 ---- 前端项目使用字体 在前端项目中使用字体通常涉及以下步骤: 「选择适合的字体」:首先,我们需要选择适合我们项目的字体。...例如: 在「服务器」上启用 HTTP/2 和 GZIP 压缩 使用CDN来增加同时的 HTTP 连接数量,并将文件复制到世界各地的其他位置 删除使用的文件 Image通常是页面负重的最大原因,许多网站未能有效优化...下面是一个示例,演示了如何使用可变字体: /* 引入可变字体 */ @font-face { font-family: 'CustomVariableFont'; src: url('path-to-font...实际上不是。@import规则可以嵌套,因此浏览器必须「逐个加载和解析每个文件」。...因此,尽管 will-change 可以用于性能优化,但在使用时需要谨慎考虑上述因素,确保它被正确地应用在需要进行复杂变换或动画的元素上。

    22230

    浏览器之性能指标_FCP

    字体交换周期 如果字体加载,使用后备字体进行渲染;如果字体加载成功,则正常使用字体字体失败周期 如果字体加载,浏览器将其视为加载失败,触发字体回退,使用正常字体替代。...删除使用的代码可以加快页面加载速度,并节省移动用户的流量。 唤起 Coverage 打开命令菜单[2]。...点击某一行,可以在Sources面板中打开该资源,并查看逐行分解的已使用代码和使用代码。任何使用的代码行开头都会有一条红线。 「URL列」是被分析的资源的URL。...虽然.gif、.jpg和.png是常用的图像文件格式,如果将它们替换为.webp或.svg文件,将节省大量时间。由于文件大小通常只有几个字节而不是几千字节,我们的图像将会在瞬间加载。...正如我们在文章前面提到的,两个网站可能具有相同的加载时间,FCP时间较短的网站可能被认为加载更快。这种感知可能会影响用户体验,并不一定反映整体网站性能。

    1.4K30

    前端字体截取技术,做炫酷网站再也不用怕中文字体数据量大啦!【实战】

    可是中文字体非常庞大,很多时候“全量”加载某个字体文件是不现实的。特别是对于一些动态页面且每个页面只有少量字符用到该字体的情况下。...当然,也不是每个页面都会用到一个字体文件中的所有字符,全量加载本身也极其浪费。...因此,“全量”加载某个字体,特别是中文字体,在当前网络环境下不仅浪费流量和时间,而且也是完全没有必要的。...首先是CSS中的unicode-range`属性,我们称之为“软截取技术”,因为它只是在本地既有字体或者浏览器已经下载的字体基础上做一个指向子集的“软链接”,并不能真正减小浏览器下载文件的大小。...虽然这个例子明显是自造的,“对中文内容中的某部分中文字符做特殊字体处理,或者是英文字体中部分字符做特殊字体处理”才是 unicode-range 这种“软截取技术”最适合的应用场景。

    2.7K20

    Fonts最佳实践

    字体加载 在深入探讨字体加载的最佳实践之前,重要的是要了解@font-face是如何工作的,以及它是如何影响字体加载的。 @font-face声明是使用任何网络字体的一个重要部分。...改变样式表的内容或交付方式会对字体的到达时间产生重大影响。同样地,删除使用的CSS和拆分样式表可以减少页面加载字体数量。 最佳做法 字体是典型的重要资源,因为没有它们,用户可能就无法查看页面内容。...因此,字体加载的最佳实践通常侧重于确保字体尽可能早地被加载。对于从第三方网站加载字体应特别注意,因为下载这些字体文件需要单独的连接设置。...避免使用preload来加载字体 一般来说,应该避免使用preload资源提示来加载字体。尽管预加载在使字体在页面加载过程的早期被发现方面非常有效,这是以占用浏览器资源来加载其他资源为代价的。...拉丁文字体的字形数量通常在100到1000个之间;中日韩字体可能有超过10000个字符。移除使用的字形可以大大减少字体的文件大小。

    2.9K72

    Iconfont在教育平台的实践

    流程繁琐,与构建工具打通自动化 鉴于此,我们自己实现了一套体系化的解决方案,开发只需要在html中引入class名,其余一切自动化实现,分分钟帮你搞定。perfect! 流程如下: ?...锯齿,锯齿,还是锯齿 虽然icon font很大程度上减少了资源大小,节省了开发工作量,一定程度上也优化了代码,并形成一个新的可遵循的规范,目前它的表现还不是那么完美,离图片还是有点距离的 ie8浏览器对圆形的...也不例外 有一定的虚边,这个跟字体本身有关系,所有的文字字体渲染都有一定的虚边 兼容问题 网上和iconfont.cn给出的推荐写法是: [@font-face](/user/font-face) {...font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?...遗留问题 IE8中,如果字体文件加载失败,则整个页面空白,虽然其他资源正常加载,逻辑正常运行。 iOS、Andriod中,字体文件或阻碍其他资源下载。

    1.6K70

    图形编辑器基于Paper.js教程11:使用Paper.js和Opentype.js加载自定义字体的技术实现解析

    function loadFont(url) { opentype.load(url, function (err, font) { if (err) { alert('Font...: 字体文件的加载是异步的,这可能导致在字体完全加载之前canvas上的文本显示不正确。...解决方案是在回调函数内处理所有与字体有关的更新,确保字体加载后才进行渲染。...字体渲染与SVG转换: Opentype.js提供的路径需要转换为SVG格式,然后才能由Paper.js正确解析和显示。...性能优化: 对于每次字体或文本改变都进行完整的字体加载和渲染可能导致性能问题,特别是在处理大型字体文件时。缓存已加载字体数据和优化渲染逻辑可以部分缓解这一问题。

    15210

    Iconfont在教育平台的实践

    流程繁琐,与构建工具打通自动化 鉴于此,我们自己实现了一套体系化的解决方案,开发只需要在html中引入class名,其余一切自动化实现,分分钟帮你搞定。perfect! 流程如下: ?...锯齿,锯齿,还是锯齿 虽然icon font很大程度上减少了资源大小,节省了开发工作量,一定程度上也优化了代码,并形成一个新的可遵循的规范,目前它的表现还不是那么完美,离图片还是有点距离的 ie8浏览器对圆形的...也不例外 有一定的虚边,这个跟字体本身有关系,所有的文字字体渲染都有一定的虚边 兼容问题 网上和iconfont.cn给出的推荐写法是: [@font-face](/user/font-face) {...font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?...遗留问题 IE8中,如果字体文件加载失败,则整个页面空白,虽然其他资源正常加载,逻辑正常运行。 iOS、Andriod中,字体文件或阻碍其他资源下载。

    1.2K20
    领券