【HTML5】瀏覽器不能顯示字體報錯Failed to decode downloaded font問題解決

把網上的項目中字體通過鏈接保存下來在本地上使用,在本地服務器上運行站點發現,用Chrome瀏覽器訪問的時候,出現錯誤提示不能正常顯示字體,怎么解決呢,看看怎么搞。

文章目錄

  • 發現問題
    • 提示警告
    • 提示錯誤
  • 字體檢查
    • 打開文件
    • 文件大小
  • 解決問題

發現問題

提示警告

打開Chrome瀏覽器的開發工具,在Console面板下,顯示?提示,如下圖
在這里插入圖片描述
報錯內容Failed to decode downloaded font: ...這是什么意思呢,

提示錯誤

如果是火狐瀏覽器的話,在Console面板下,報錯提示會是另一個樣,如下圖
在這里插入圖片描述
報錯內容downloadable font: rejected by sanitizer (font-family: "element-icons" style:normal weight:400 stretch:100 src index:1) source:...這又是什么意思呢,

看鏈接地址是沒有問題的,經過驗證,發現字體文件是損壞的,

字體檢查

之前在Chrome瀏覽器里面看著能預覽字體,如下圖
在這里插入圖片描述

看著是正常的,就沒有懷疑過文件是損壞的(Chrome瀏覽器會盡一切可能預覽字體) =.=

打開文件

用這個transfonter在線轉換工具的Webfont generator字體功能,

就可以發現,如下圖所示
在這里插入圖片描述

提示Font file is corrupted (字體文件已損壞)

文件大小

其實還有一個方式可以驗證文件是否損壞,

通過對比保存下來的文件大小,如大小不一致那就是損壞的文件

解決問題

發現了問題(出坑 ),重新找個一樣的文件(沒問題)覆蓋就好,

寫到最后,遇到同樣的問題的讀者,可以試一下

圖2

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/717713.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/717713.shtml
英文地址,請注明出處:http://en.pswp.cn/news/717713.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【C++】每周一題——2024.3.3

題目 Cpp 【問題描述】 字符環(來源:NOI題庫)。有兩個由字符構成的環,請寫一個程序,計算這兩個字符環上最長公共字符串的長度。例如,字符串“ABCEFAGADEGKABUVKLM”的首尾連在一起,構成一個環&a…

k8s常見的命令集錦

Kubernetes(K8s)是一個開源的容器編排系統,它提供了一系列的命令行工具 kubectl 來管理和操作集群中的資源。以下是一些常見的 kubectl 命令集錦: kubectl get:用于獲取集群中的資源對象信息,如pods、nodes…

112.路徑總和

// 定義一個名為 Solution 的類 class Solution {// 定義一個名為 hasPathSum 的公共方法,接收一個 TreeNode 類型的根節點 root 和一個整數 targetSum 作為參數// 方法返回一個布爾值,表示從根節點開始是否存在一條路徑,使得路徑上所有節點的…

18個驚艷的可視化大屏(第12輯):智慧校園與教育方向

智慧校園可視化大屏通過數據可視化技術,將學校各個方面的數據信息進行展示,可以提高信息公開透明度、優化校園管理、提高學生教育質量和提高校內活動宣傳效果等。 1提高信息公開透明度: 通過大屏幕展示校園各個方面的數據信息,可…

mysql 字符串的拆分之 substring_index()函數

語法 substring_index(string,delimiter,number) string : 要分隔的字符串。 delimiter : 分隔符 number :分隔符位置 注意 number 可以為正數,也可以為負數。 正數時是指的是從左向右數,第 number 個分隔符左…

大唐杯學習筆記:Day3

1.1 SA組網和NSA組網 SA組網(非獨立組網)是指使能5G網絡不需要其他移動通信系統的輔助,可以獨立進行工作。NSA組網(獨立組網)是指使能5G網絡需要其他移動通信系統的輔助,如果輔助缺失,那么5G網絡不可以獨立進行工作,通常而言5G網絡建設階段,NSA組網方式是在表明5G網絡的使用需…

奔跑吧,前端er!前端五大方向技能羅列,webGL、AI、桌面、游戲

經常看到頭條上前端們爭論各種框架的優劣,然后相互爭吵不休,其實技術也好,框架也好,都是服務于項目需求的,爭論的鐵子們都站在自己的項目角度來品評工具,肯定是公說公有理婆說婆有理啦。 技術和框架是中性的…

編程之美_目錄

編程之美 0)0_0_常用函數庫 0)0_1_測試函數總結 1)1.1 數據結構之 數組 2)1.2 數據結構之 字符串 3)1.3 數據結構之 鏈表 4)1.4 數據結構之 隊列 5)1.5 數據結構之 棧 5)1.6 …

【latex】\IEEEpubid版權聲明與正文內容重疊

問題描述 撰寫IEEE Trans論文時,出現版權聲明文字\IEEEpubid與正文內容重疊的問題: 原因分析: 在使用模板時,不小心將以下命令刪除了: \IEEEpubidadjcol 解決方案: 在需要換頁的位置附近添加以上命令&…

在Jupyter-lab中使用RDKit畫分子2D圖

在Jupyter-lab中使用RDKit畫分子2D圖 在做完分子對接后,想看看篩選后的分子的結構。因此想利用Jupyter-lab來畫分子的2D圖。 1. 安裝Jupyter-lab與RDKit 系統:Win11已安裝conda RDKit 是一個功能強大、靈活易用的化學信息學工具包,廣泛應…

w30使用python調用shell腳本

使用python腳本去實現永恒之藍漏洞攻擊 實驗環境 攻擊工具:pythonmsfconsole 靶場:win7 和 kali實驗目的 演示python腳本調用過程 實驗步驟 1.寫一個永恒之藍的攻擊腳本,定義為blue.rc use exploit/windows/smb/ms17_010_eternalblue …

Spark(2)-基礎tranform算子(一)

一、算子列表 編號名稱1map算子2flatMap算子3filter算子4mapPartitions算子5mapPartitionsWithIndex算子6keys算子7values算子8mapValues算子9flatMaplValues算子10union算子11reducedByKey算子12combineByKey算子13groupByKey算子14foldByKey算子15aggregateByKey算子16Shuff…

深度學習工具之tokens計算器

1.什么是Token Token是GPT處理文本的基本單位。Token可以是一個字、一個詞語或特定語言中的一個字符。它們負責將輸入的文本數據轉換為 GPT 可以處理的數據格式。每個 GPT 模型都有一個預設的最大 Tokens 數量,例如,GPT-3 每次調用允許處理的最大 Token…

韋東山嵌入式Liunx入門驅動開發五

文章目錄 一、驅動程序基石1-1 休眠與喚醒1-2 POLL機制1-3 異步通知(1) 異步通知程序解析(2) 異步通知機制內核代碼詳解 1-4 阻塞與非阻塞1-5 定時器(1) 內核函數(2) 定時器時間單位 1-6 中斷下半部 tasklet 本人學習完韋老師的視頻,因此來復習鞏固,寫以…

華為OD技術面試案例7-2024年

記錄一下我面試od的面試過程. 1、第一個是hr電話面試, 其實也就是od的hr致電, 簡單了解一下個人情況, 問我要一些個人信息, 這塊沒啥問題; 2、第二個就是機考了, 根據我提供的信息, od的hr給我發了一個機考的鏈接, 并告訴我7天內有效, 可以在考試之前先刷刷題, 刷題地址參考…

《幻獸帕魯》游戲對服務器性能的具體要求是什么?

《幻獸帕魯》游戲對服務器性能的具體要求是什么? CPU:官方最低要求為i5-3570K,但在多人游玩時可能會有明顯卡頓。此外,還有建議選擇4核或更高性能的處理器,以確保游戲運行流暢。 內存:對于不同人數的聯機&…

超越想象:人工智能的奇跡與可能性

超越想象:人工智能的奇跡與可能性 人工智能(Artificial Intelligence,AI)作為當今科技領域的熱門話題,其奇跡和可能性正在不斷被揭示和拓展,超越了人們的想象。從智能機器人到自動駕駛汽車,從語…

蘋果ios群控軟件開發常用源代碼分享!

在移動軟件開發領域,蘋果設備由于其封閉性和安全性受到了廣大開發者的青睞,然而,這也為開發者帶來了一些挑戰,特別是在進行群控軟件開發時。 群控軟件是指可以同時控制多臺設備的軟件,這在自動化測試、批量操作等場景…

數據要素:數字化轉型中的新“金礦”及其發展潛力

作為一名在數字化轉型項目中摸爬滾打的實踐者,我們見證了數據從簡單的信息處理工具逐漸演變為驅動經濟社會發展的關鍵要素。近日,多部門聯合發布的《“數據要素”三年行動計劃(2024—2026年)》更是將數據要素的重要性提升到了新的…

C++ //練習 10.15 編寫一個lambda,捕獲它所在函數的int,并接受一個int參數。lambda應該返回捕獲的int和int參數的和。

C Primer(第5版) 練習 10.15 練習 10.15 編寫一個lambda,捕獲它所在函數的int,并接受一個int參數。lambda應該返回捕獲的int和int參數的和。 環境:Linux Ubuntu(云服務器) 工具:v…