檢查網頁上使用的字體
發佈於2024-08-01
瀏覽：285
情況
因為我目前正在學習next.j。我正在學習下一個團隊創建的課程 (https://nextjs.org/learn)。
有一個與字體和圖像優化相關的部分。
老實說，我從來沒有太關注字體以及網頁上的某個元素使用哪些字體。
但透過閱讀這些材料，我意識到你能夠做到這一點。您可以找出某個元素使用了哪些字體。您可以在頁面上擁有多種自訂字體，這可能很有用。
當我使用 Chrome 作為預設瀏覽器時，我打開了開發工具並檢查了使用的字體。
這看起來很糟糕並且沒有太多資訊。
但是我在 Firefox 中做了同樣的事情，而 Firefox 似乎有更多關於字體的選項。您可以透過它的編輯器更改大小、行高、間距、粗細。這似乎非常有用，特別是當您試圖找出最適合某個元素的字體屬性時。
我的想法
這些關於字體的發現提醒我，當我過去在佈局方面遇到一些麻煩時，我可以在 Firefox 中比在 Chrome 中進行更好的調試。
Firefox 似乎更關心 CSS 的東西，以使 FE 開發比 Chrome 更流暢。我想我下次在做 CSS 工作時應該考慮到這一點，並使用 Firefox 作為預設瀏覽器！
乾杯。祝你有美好的一天！
版本聲明
本文轉載於：https://dev.to/machy44/check-used-fonts-on-a-webpage-29cn?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
儘管程式碼有效，為什麼 POST 請求無法擷取 PHP 中的輸入？解決PHP 中的POST 請求故障在提供的程式碼片段：action=''而非：action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列：表單提交後使用 var_dump 檢查 $_POST 陣列的內容...程式設計 發佈於2024-12-18 -
在 Go 中使用 WebSocket 進行即時通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...程式設計 發佈於2024-12-18
-
插入資料時如何修復「常規錯誤：2006 MySQL 伺服器已消失」？插入記錄時如何解決「一般錯誤：2006 MySQL 伺服器已消失」介紹：將資料插入MySQL 資料庫有時會導致錯誤「一般錯誤：2006 MySQL 伺服器已消失」。當與伺服器的連線遺失時會出現此錯誤，通常是由於 MySQL 配置中的兩個變數之一所致。 解決方案：解決此錯誤的關鍵是調整wait_tim...程式設計 發佈於2024-12-18
-
Bootstrap 4 Beta 中的列偏移發生了什麼事？Bootstrap 4 Beta：列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而，隨著 Beta 2 的後續發布，這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...程式設計 發佈於2024-12-18
-
如何在 PHP 中組合兩個關聯數組，同時保留唯一 ID 並處理重複名稱？在 PHP 中組合關聯數組在 PHP 中，將兩個關聯數組組合成一個數組是常見任務。考慮以下請求：問題描述：提供的代碼定義了兩個關聯數組，$array1 和 $array2。目標是建立一個新陣列 $array3，它合併兩個陣列中的所有鍵值對。 此外，提供的陣列具有唯一的 ID，而名稱可能重疊。要求是建...程式設計 發佈於2024-12-18
-
CSS3 轉場是否提供事件來偵測起點和終點？了解 CSS3 過渡事件CSS3 過渡允許在 Web 元素上實現流暢的動畫和視覺效果。為了增強使用者體驗並使操作與這些轉換同步，監控其進度非常重要。本文解決了 CSS3 是否提供事件來檢查過渡何時開始或結束的問題。 W3C CSS 過渡草案W3C CSS 過渡草案規定CSS 轉換會觸發對應的 DOM...程式設計 發佈於2024-12-18
-
Java 中可以手動釋放記憶體嗎？Java 中的手動內存釋放與垃圾回收與C 不同，Java 採用託管內存框架來處理內存分配和釋放由垃圾收集器(GC) 自動執行。這種自動化方法可以提高記憶體利用率並防止困擾 C 程式的記憶體洩漏。 Java 中可以手動釋放記憶體嗎？ 由於 Java 的記憶體管理是由GC，它沒有提供像 C 中的 fre...程式設計 發佈於2024-12-18
-
Java 1.6 中如何可靠地確定檔案是否為符號連結？在 Java 1.6 中驗證符號連結確定符號連結的存在對於各種文件處理操作至關重要。在 Java 中，識別符號連結時需要考慮一些潛在問題，特別是在目錄遍歷的上下文中。 檢查符號連結的常見方法是比較文件的絕對路徑和規範路徑。規範路徑表示檔案的標準化路徑，而絕對路徑可能包括符號連結。傳統上，概念是如果這...程式設計 發佈於2024-12-17
-
如何使背景顏色透明，同時保持文字不透明？背景顏色的不透明度而不影響文本在Web 開發領域，實現透明度通常對於增強視覺吸引力和網站元素的功能。常見的要求是對 div 背景套用透明度，同時保留所包含文字的不透明度。這可能會帶來挑戰，特別是在確保跨瀏覽器相容性方面。 rgba 解決方案最有效且廣泛支持的解決方案是利用「RGBA」(紅、綠、藍、A...程式設計 發佈於2024-12-17
-
PHP 字串比較：`==`、`===` 或 `strcmp()` – 您應該使用哪個運算子？PHP 中的字串比較：'=='、'===' 或 'strcmp()'？ PHP 中的字串比較PHP 可以使用不同的運算子來完成，例如「==」、「===」或「strcmp()」函數。此比較涉及檢查兩個字串是否相等。 '==' 與'...程式設計 發佈於2024-12-17
-
如何自訂操作列的按鈕和外觀？自訂操作欄的按鈕和外觀要實現所需的自訂操作欄外觀，請考慮以下步驟： 1.建立自訂操作按鈕若要將圖片包含為按鈕，請透過擴充Button類別來定義自訂視圖。然後可以將此自訂視圖顯示在 ActionBar 上，如下所示：<Button android:id="@ id/my_cus...程式設計 發佈於2024-12-17
-
介紹 Laravel 的履歷解析器/CV 解析器照片由 Mohammad Rahmani 在 Unsplash 上拍攝 基於我們的 Resume/CV Parsing AI API 端點的流行，我們專門為您製作了一個專門的輕量級 Laravel 庫。 招募的未來：敏銳、精確且對 Laravel 友好 這個新套件可在 github...程式設計 發佈於2024-12-17
-
如何在 PHP 中重新格式化日期以方便使用者顯示？在PHP 中重新格式化日期使用資料庫中儲存的日期時，通常需要重新格式化它們以便於使用者友好的顯示。對於以「2009-08-12」等格式儲存的日期尤其如此，人類本質上無法讀取這種格式。 為了解決這個問題，PHP 提供了各種工具，使您能夠輕鬆重新格式化日期。一種有效的方法是使用 DateTime 類，它...程式設計 發佈於2024-12-17
-
為什麼我無法將元素新增到具有通配符泛型類型（`?extends Parent`）的 Java 集合中？型安與通配符泛型：了解禁止修飾符在Java 使用泛型集合時，通配符泛型的概念可以引入某些最初看起來可能違反直覺的限制。一個典型的例子是無法在具有通配符泛型類型的 Java 集合中新增值。 考慮以下程式碼片段：List<? extends Parent> list = ...; Paren...程式設計 發佈於2024-12-17
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
