如何查看網站使用的字體

已發表: 2020-09-27

如果您曾經完全被您在網站上看到的字體所吸引，您可能想知道如何發現它的名稱以便您可以在自己的內容中使用它。 優質的排版可以改善訪問者的閱讀體驗，因此可能值得努力找到它。 無論您出於何種原因檢查網站上使用的字體，都有許多工具可以提供幫助。

在本文中，我們將討論為什麼您可能想要查看網站使用的字體。 我們還將向您展示如何執行此操作。

讓我們開始吧！

訂閱我們的 YouTube 頻道

為什麼您可能想要檢查網站使用的字體

正如我們已經提到的，漂亮且可讀的字體可以改善您網站的用戶體驗 (UX) 和可讀性。 它還確保訪問者可以輕鬆地與您的內容互動，而無需費力破譯。 如果您的文字時尚但難以辨認，讀者會發現很難理解或欣賞您的材料。

如果文字不可讀，號召性用語 (CTA) 按鈕也可能變得毫無用處。 這就是為什麼您可能會發現保留一份字體列表很方便，這些字體既時尚又易讀。 然後，您可以在您的網站上或將來為客戶使用它們。

如何查看網站使用的字體（3 種可用方法）

您可以使用多種方法來檢查網站使用的字體。 瀏覽器的檢查功能是一個很好的首選解決方案，但也有一些擴展可以產生相同的效果。 您甚至可以使用在線工具從圖像中查找字體。 讓我們來看看這些選項中的每一個。

1. 使用瀏覽器檢查器工具識別字體

檢查網站使用的字體的最簡單方法之一是使用瀏覽器的檢查器工具。 儘管在本示例中我們將使用 Chrome Inspector，但值得注意的是，其他瀏覽器也具有相同的功能。

首先，右鍵單擊包含您要查找的字體的網頁。 從結果菜單中，選擇檢查：

打開 Chrome Inspector 工具。

如果您更喜歡使用鍵盤快捷鍵，請嘗試在 Windows 或 Linux 上使用Ctrl+Shift+I 。 如果您使用的是 Mac，則相當於Cmd+Shift+I。

在屏幕右側的窗口中，使用您要查看的字體查找文本。 當您選擇相應的 HTML 元素時，它將突出顯示：

在 Chrome Inspector 工具中選擇一個文本元素。

接下來，單擊“計算”選項卡並蒐索“font-family”：

在 Chrome Inspector 工具中查看字體系列。

您應該會看到此處列出的字體名稱及其樣式。

要查看與字體相關的 CSS，請查看樣式選項卡。 您可以滾動瀏覽以搜索與字體相關的值。 但是，由於此處可能存在覆蓋和不相關的樣式規則，因此Computed選項卡通常更有幫助。

2. 通過瀏覽器擴展查找字體

瀏覽器擴展可以提供一種更直接的方式來查找網站上的字體詳細信息，尤其是當您對 Inspector 不滿意時。 此外，他們通常可以更快地提供您正在尋找的答案，以便您可以回到手頭的任務。

一些此類附加組件包括：

  • Fontanello：免費使用，此擴展程序使您可以在瀏覽時通過突出顯示並右鍵單擊字體來查找字體的名稱、粗細、樣式等。
  • WhatFont：進一步簡化字體檢測，WhatFont 使您只需將鼠標懸停在字體上即可查看字體名稱。
  • CSS Peeper：考慮到網頁設計師，這個擴展更加強大，可以從網頁的 CSS 代碼中告訴你更多的細節。

但是，這些擴展中的每一個都有不同的瀏覽器支持。 WhatFont 可用於 Firefox、Chrome、Safari 和 Internet Explorer。 另一方面，Fontanello 僅適用於 Firefox 和 Chrome。 CSS Peeper 是 Chrome 專用的工具，您將無法在任何其他平台上使用。

為了快速找到特定字體的名稱，WhatFont 是最容易使用的選項。 由於它還支持大多數瀏覽器，我們將使用它進行快速演示。

安裝 WhatFont 後，您可以通過在瀏覽器的工具欄中激活它並將鼠標懸停在某些文本上來檢查網站使用的字體：

使用 WhatFont 瀏覽器擴展程序檢查網站使用的字體。

當您第一次將鼠標懸停在文本上時，您只會看到字體的名稱。 但是，單擊名稱會顯示一個展開的彈出窗口，其中包含更多詳細信息，例如大小、粗細、顏色和行高。 它還可以通過 Typekit 或 Google Fonts 識別字體是否可用。

檢查完字體詳細信息後，您可以使用瀏覽器窗口右上角的退出 WhatFont按鈕退出該工具。

3. 檢測圖像中的字體

最後，您還可以嘗試查看圖像中使用的字體。 這包括您在徽標或信息圖表中看到的字體。 根據我們使用字體檢測器的經驗，WhatTheFont 是完成這項工作的最有效的在線工具。

要使用 WhatTheFont，您需要上傳相關圖片並選擇具有相關字體的部分：

從 WhatTheFont 中的圖像中選擇文本。

然後它會返回一個結果頁面，其中包含與您要識別的字體相似（如果不是完全匹配）的幾種字體：

WhatTheFont 結果。

您在這裡的成功率可能會因字體的來源和受歡迎程度而異。 如果字體的確切名稱對您來說非常重要，則可能很難找到一種工具可以滿足您的需求。

但是，如果您願意使用與您在圖像中找到的字體相似的字體，那麼在線檢測器應該可以很好地滿足您的需求。

結論

視覺上吸引人且清晰易讀的字體可以增強網站訪問者的閱讀體驗。 這可能會提示您繼續尋找可以在您的網站或為您的客戶使用的新字體。 無論您出於何種原因想要檢查網站使用的字體，都有許多工具可以幫助您。

在這篇文章中，我們討論了三種查看網站使用的字體的方法：

  1. 使用瀏覽器檢查器工具識別字體。
  2. 使用諸如 WhatFont 之類的瀏覽器擴展程序查找字體。
  3. 使用 WhatTheFont 檢測圖像中的字體。

您對如何檢查網站上使用的字體有任何疑問嗎？ 在下面的評論部分讓我們知道！

圖片來自 rudall30/shutterstock.com