如果您曾經完全被網站上看到的字體所吸引，那麼您可能想知道如何發現它的名稱，以便可以在自己的內容中使用它。 高質量的字體可以改善訪問者的閱讀體驗，因此可能值得嘗試一下。 不管您檢查網站上使用哪種字體的原因，都有許多可以幫助您的工具。
在本文中，我們將討論為什麼您可能想要查看網站使用的字體。 我們還將向您展示如何操作。
讓我們開始吧！
為什麼您可能要檢查網站使用的字體
就像我們已經提到的那樣，精美易讀的字體可以改善您網站的用戶體驗（UX）和可讀性。 它還可以確保訪問者可以舒適地與您的內容互動，而不會費力地解密它。 如果您的文字時尚但難以辨認，讀者會發現很難理解或欣賞您的資料。
如果它們的文字不可讀，那麼號召性用語（CTA）按鈕也可能幾乎全部無效。 這就是為什麼您可能會方便地保留一些字體列表的原因，因為它們既是 時尚而清晰。 然後，您可以在您的網站上使用它們，也可以將來將其用於客戶。
如何查看網站使用的字體（3種可用方法）
您可以使用多種方法來檢查網站使用的字體。 瀏覽器的檢查功能是一個很好的入門解決方案，但是有些擴展可以產生同等的效果。 您甚至可以使用在線工具從圖像中找到字體。 讓我們看一下每個選項。
1.使用瀏覽器檢查器工具識別字體
檢查網站使用哪種字體的最簡單方法之一是使用瀏覽器的檢查器工具。 儘管在此示例中我們將使用Chrome Inspector，但值得注意的是其他瀏覽器也具有相同的功能。
首先，右鍵單擊包含您要查找的字體的網頁。 從出現的菜單中，選擇「檢查」：
如果您想使用鍵盤快捷鍵，請在Windows或Linux上嘗試按Ctrl + Shift + I。 如果您使用的是Mac，則等效為Cmd + Shift + I。
在屏幕右側的窗口中，使用您要簽出的字體查找文本。 當您選擇相應的HTML元素時，它將突出顯示：
接下來，單擊「計算」選項卡，然後搜索「字體家族」：
您應該在此處看到字體的名稱及其樣式。
要查看與字體相關的CSS，請在「樣式」選項卡下查找。 您可以滾動瀏覽以搜索與字體相關的值。 但是，由於此處可能存在覆蓋和不相關的樣式規則，因此「計算」選項卡通常更有用。
2.通過瀏覽器擴展查找字體
瀏覽器擴展程序可以提供一種更直接的方法來查找網站上的字體詳細信息，尤其是當您對Inspector不滿意時。 另外，他們通常可以更快地提供您正在尋找的答案，以便您可以立即完成任務。
這些附加組件包括：
- 豐塔內洛：可以免費使用，此擴展程序使您可以在瀏覽時突出顯示並右鍵單擊字體，從而更輕鬆地找到字體的名稱，粗細，樣式。
- 什麼字體：進一步簡化了字體檢測，WhatFont使您只需懸停在字體上即可查看字體名稱。
- CSS窺視器：用 網頁設計師 請注意，此擴展功能更強大，可以告訴您網頁CSS代碼中的其他詳細信息。
但是，每個擴展都有不同的瀏覽器支持。 WhatFont可用於Firefox，Chrome，Safari和Internet Explorer。 另一方面，Fontanello僅適用於Firefox和Chrome。 CSS Peeper是Chrome專用的工具，您將無法在任何其他平台上使用它。
為了快速查找特定字體的名稱，WhatFont是最容易使用的選項。 由於它也支持大多數瀏覽器，因此我們將使用它進行快速演示。
安裝WhatFont之後，您可以通過在瀏覽器的工具欄中將其激活並懸停在某些文本上來檢查網站使用的字體：
第一次將滑鼠懸停在文本上時，您只會看到字體的名稱。 但是，單擊名稱將顯示一個展開的彈出窗口，其中包含更多詳細信息，例如大小，重量，顏色和行高。 它還可以識別是否可以通過Typekit或Google字體使用字體。
完成字體詳細信息檢查後，您可以使用瀏覽器窗口右上角的Exit WhatFont按鈕退出該工具。
3.檢測圖像中的字體
最後，您也可以嘗試查看圖像中使用的字體。 這包括您見過的字體 在徽標中 或圖表。 在 我們在字體檢測器方面的經驗， 什麼字體 是這項工作最有效的在線工具。
要使用WhatTheFont，您需要上傳相關圖片並選擇具有相關字體的部分：
然後，它將返回一個結果頁面，其中包含幾種字體，即使不是完全匹配，它們也與您嘗試識別的字體相似：
根據字體的來源和受歡迎程度，您的成功率可能會有所不同。 如果字體的確切名稱對您來說非常重要，則可能很難找到可以滿足您需求的工具。
但是，如果您願意使用與在圖像中找到的字體相似的字體，則在線檢測器應該可以滿足您的需求。
結論
視覺上吸引人的字體可以增強您網站訪問者的閱讀體驗。 這可能會提示您繼續尋找可在網站或客戶上使用的新字體。 不管您出於何種原因想要查看網站使用的字體，都有許多工具可以為您提供幫助。
在本文中，我們討論了三種方法來查看網站使用的字體：
您對如何檢查網站上使用的字體有任何疑問嗎？ 讓我們在下面的評論部分中知道！
圖片來自rudall30 / shutterstock.com