如何從網站識別字體

您是否曾經在不同的網站、圖片或博客上為您的網站找到完美的字體，但不知道如何找到它的名稱？ 你來對地方了。 在本指南中，我們將向您展示如何從網站中識別字體，以幫助您找到適合您業務的完美排版。

為什麼查看網站使用的字體很有用？

如果您正在構建您的網站或設計您的在線內容，您總是在尋找改進它的方法。 您可以通過多種方式做到這一點。 最明顯的是使用不同的主題、添加功能並提供更好的內容。 但是，您還可以採取其他不那麼明顯的措施來超越競爭對手並使您的網站與眾不同。 字體就是其中之一。

您使用的字體遍布您的網站，不僅可以提高可讀性，還可以提高整體導航。 如果您的排版看起來很專業並且易於閱讀，那麼您的訪問者更有可能留在您的網站上。 字體經常被忽視，但會產生很大的影響。

即使您可以將字體添加到您的網站，您也可能希望使用通過傳統方式找不到的排版。 互聯網上到處都是帶有漂亮字體的網站，您可能想在自己的網站上使用它們。 但是，困難的部分是識別這些網站使用的字體。 找到字體沒有簡單的方法，即使您是專家，每種字體也存在大量微小差異。 此外，字體樣式和 CSS 更改可能會放大這些差異。

這就是為什麼在這篇文章中，我們將向您展示如何使用不同的工具來找出網站使用的字體。

如何從網站識別字體

有多種方法可以識別網站上的字體：

1. 使用檢查工具
2. 帶插件
   1. FFF回退
   2. 字體
   3. 豐塔內洛
   4. 什麼字體

其中一些比其他更難使用，有些可能需要外部工具和擴展。 讓我們仔細看看所有這些不同的方法。

1) 使用檢查工具識別字體

從網站識別字體的最基本方法是使用瀏覽器的檢查工具。 為此，您必須打開瀏覽器的開發人員工具。 通常，您可以通過幾種不同的方式執行此操作：

• 在瀏覽器上按 F12 或 Ctrl+Shift+I
• 右鍵單擊打開瀏覽器的菜單，然後轉到檢查
• 從瀏覽器的菜單中打開開發者工具選項並轉到Web Developer

當您找到您喜歡的字體時，右鍵單擊包含您要識別的字體的文本，然後單擊檢查元素。

該元素將在檢查器工具上突出顯示，您將在檢查器旁邊的框中看到樣式和佈局。

然後，單擊Computed選項卡並向下滾動以檢查Font-Family字段。 該字段應列出網站的字體。 例如，在本例中，字體為 Roboto 或 SF-Pro Display。

這樣，您可以使用 Inspector 工具識別任何網站上的字體。 但是，您可能會發現無法右鍵單擊或訪問檢查器工具的站點，因為它們不允許這樣做。 如果是這樣的話，還有另一種選擇。 您還可以使用專用工具查看網站使用的字體。

讓我們看一下可用於識別網站字體的一些最佳插件。

2) 使用工具和插件識別字體

如果您無法在網站上使用檢查器工具，則可以使用專用工具和插件來識別字體。 那裡有幾種工具，為了讓您的生活更輕鬆，我們將列出最好的工具，並向您展示如何使用它們來查找和識別不同網站上使用的字體。

2.1) FFFF回退

FFFFallback是一個簡單的書籤工具，可用於識別任何網站上的字體。 最好的部分是你不需要安裝任何東西。 您只需將小書籤保存到您的書籤選項卡，然後在任何站點上單擊其書籤即可檢查字體。 該工具使用 Javascript 掃描 CSS 並識別排版及其字體樣式。

要使用此工具，您需要打開此頁面。 然後，單擊FFFFALLBACK按鈕並將其拖到您的書籤欄，如下所示。 如果瀏覽器上未顯示書籤欄，請按Ctrl+Shift+B啟用它。

現在，打開一個您想要識別字體的網站，然後單擊您剛剛保存在書籤欄上的書籤。 它應該在新列上顯示網站的字體系列和样式，如下所示。 確保選擇Web Font作為頂部的選項。

2.2) 字體

Fount 類似於 FFFFALLBACK，但它也可以讓您檢查特定文本的字體。 這樣，您可以指定要檢查字體的文本。

要使用 Fount，請轉到此站點並將Bookmarklet從其網站拖放到您的書籤選項卡中以保存它。

然後，打開您要檢查字體的任何網站，然後單擊“字體”書籤。 這會將您的光標更改為加號。 只需單擊任何文本，它就會在屏幕右上角顯示已識別的字體。

在您知道該文本的字體後，您可以再次單擊字體框以禁用光標並像往常一樣繼續瀏覽您的頁面。

2.3) 豐塔內羅

如果您更喜歡使用瀏覽器擴展，Fontanello 是您識別任何網站字體的完美工具。 只需在 Chrome 或 Firefox 上安裝 Fontanello 擴展程序並激活它。

要識別網站上的字體，只需右鍵單擊任何文本並選擇Fontanello選項。 下拉菜單將顯示字體系列及其樣式和變體。

2.4) 什麼字體

或者，您可以以類似的方式使用WhatFont擴展。 首先，在 Chrome 或 Firefox 上安裝擴展程序。 然後，單擊瀏覽器工具欄上的 WhatFont 工具圖標，然後單擊任何文本以檢查其字體。 好消息是您可以選擇不同的文本並查看它們同時使用的排版。

完成後，按Exit WhatFont關閉字體彈出窗口並照常使用網頁。

既然我們已經了解瞭如何從文本中識別字體，您可能想知道是否可以從圖像中做同樣的事情。 答案是肯定的！ 讓我們看看如何做到這一點。

如何從圖像中識別字體

除了從文本中發現字體外，您還可以通過圖像識別網站中的字體。 為此，我們將使用名為WhatTheFont的在線工具。

什麼字體

這個在線工具可以讓你上傳任何圖像，分析圖像的文本，並告訴你它使用的是什麼字體。

為此，請轉到此頁面並將圖像拖動或上傳到工具上（確保它是 JPG 或 PNG 格式。）然後，為文本定義裁剪框，該工具將顯示正確的字體文本。 最重要的是，WhatTheFont 還為您提供了可以購買字體的網站，甚至可以讓您使用自定義文本測試字體。

這樣，您可以從圖片或屏幕截圖中檢查字體。 此外，它還有一個移動應用程序，您也可以使用它來識別手機中的字體。

結論

總而言之，您使用的字體會對您的網站產生重大影響。 它可以幫助您提高可讀性、整體導航並讓您的訪問者停留更長時間。 清晰度和可讀性是任何網站的重要方面，您投入的精力越多，您獲得的結果就越好。

在本指南中，我們看到了識別網站字體的不同方法：

• 使用瀏覽器檢查工具
• 使用書籤工具
• 通過瀏覽器擴展
• 使用專門的在線工具從圖像中識別字體

找到正確的字體後，您可以選擇如何將它們添加到您的網站。 選擇要使用的字體後，我們建議您查看我們的指南，了解如何在 WordPress 中更改字體以立即切換到新字體。

如果您正在尋找更多方法來提高 WordPress 網站的可讀性和導航，您還可以查看以下文章：

• 如何在 WordPress 中添加麵包屑
• 按品牌組織 WooCommerce 產品
• 如何添加 WordPress 大型菜單

你發現新字體了嗎？ 您使用了哪種方法？ 在下面的評論部分讓我們知道！