如何知道網站使用什麼字體

如果您曾經看過一個特別吸引人的網站，並且想知道如何查看網站使用的字體，答案就像打開瀏覽器的檢查器一樣簡單。 網站的每一點都在您的瀏覽器中進行解釋。 因此，如果您知道如何正確使用瀏覽器檢查器，您不僅可以找到來源，還可以找到它所擁有的圖像、頁面上任何其他元素的 CSS 屬性。

在這篇文章中，我們將了解如何使用 Chrome 瀏覽器檢查器來查找網站使用的字體，以及如何開始使用它們。 但首先，我將解釋如何訪問它以及檢查器中可用的功能。

訪問 Chrome 檢查器

如果您使用 Chrome 瀏覽器並想要檢查網站，您應該做的第一件事是訪問檢查器窗口。 做這件事有很多種方法：

• 按 F12 鍵，或
• 通過右鍵單擊某個項目並在打開的菜單中，訪問“ Inspect ”選項。 這種方法的優點是它直接突出了有問題的元素，或者
• 通過按組合鍵Control + Shift + I （在 Windows 上）或Cmd + Alt + I （在 Mac 上），或
• 通過訪問 Chrome 菜單（右上角的 3 個點）»更多工具»開發人員工具。

檢查器窗口可以顯示在瀏覽器窗口本身中，也可以顯示在單獨的窗口中。 要訪問這些選項，您可以通過單擊檢查器右上角的配置圖標（3 個點）並更改屬性 «Dock Side» 的值來實現。

您還可以選擇以計算機查看模式查看頁面內容，或者就像在移動設備上查看一樣。 單擊檢查器頂部欄左側的第二個按鈕，您將看到內容將如何自動顯示，就像您從移動設備訪問它一樣。

您還可以指明要在其上顯示的設備類型、尺寸或是否要以縱向或橫向模式顯示。

檢查器主選項卡

您可能已經看到，檢查器由不同的選項卡組成。

從他們每個人中，您都可以訪問不同的功能和特性：

• Elements ：顯示頁面的 HTML 代碼，以及應用的樣式。 您還可以修改它們并快速添加新規則。
• 控制台：顯示頁面上出現的不同錯誤和警告消息（未加載的圖像、javascript 錯誤……）
• Sources ：顯示頁面的資源樹。 您可以查看不同資源的獲取位置並對其進行修改。
• 網絡：顯示從網站發出的不同請求、訪問請求的內容、獲得的響應、次數……
• 性能：顯示正在運行的進程並用於衡量頁面的性能。
• 內存：顯示網頁加載和執行過程中消耗的內存。
• 應用程序：顯示有關 Web 應用程序使用的資源的有用信息。
• 安全性：顯示有關從頁面訪問的不同站點及其各自證書的信息。
• 審計：允許您生成審計報告以檢查錯誤。
• 有些插件可以向檢查器添加選項卡和功能，因此可能會有更多選項卡。 在上圖中，顯示我們已經安裝了Redux DevTools插件。

元素選項卡

現在讓我們回到手頭的問題：我們想知道網頁上任何內容的字體。

正如我之前提到的，從“元素”選項卡中，您可以訪問 HTML 代碼以及您所在頁面上不同元素的樣式。

如上圖所示，左側是顯示源代碼的主窗口。 在右側，您可以看到應用於頁面不同元素的 CSS 樣式規則面板。

實際上，在樣式面板中，您有三個選項卡：

• 樣式：顯示應用的 CSS 規則，您可以修改和添加新規則。
• Computed ：顯示應用於元素的所有規則，面板表示元素的邊框、邊距和填充。
• 事件監聽器：顯示頁面上已啟動的事件樹以及受它們影響的控件。

查看項目的詳細信息

因此，例如，如果您轉到我們的 Nelio Software 主頁，從標題中選擇Nelio Software 一詞並右鍵單擊以檢查項目是什麼，檢查器將打開並顯示上圖。

在檢查器圖像中，您可以看到主窗口告訴我標題樣式“Nelio Software”是h1 。

在同一窗口中，您可以選擇右鍵單擊任何屬性或文本並修改或刪除它。 顯然，您在此處所做的任何更改都不會更改原始內容，但是當您設計頁面並且想要了解所做的任何更改的外觀時，它恰恰是一個非常有用的工具。

查看字體

現在您知道它是標題，但是字體呢？

好吧，很簡單，在檢查器的Computed選項卡中，您將找到所選項目的所有屬性。 向下滾動到font-family屬性，您將在那裡找到具有我們網站標題的確切字體。

如果您對想要更改字體時該元素的外觀感到好奇，請轉到“樣式”選項卡，轉到“字體系列”屬性，然後可以直接使用所需的值對其進行修改。

您將自動看到您的網站更改了字體類型

如您所見，Google Chrome 檢查器是一個非常舒適且易於使用的工具，可用於玩轉和嘗試對元素進行任何修改後留下的設計。

圖像的字體怎麼樣？

如您所見，Google Chrome 檢查器可讓您查看頁面上任何元素的屬性。 但是，如果您想在網站上看到圖像的字體，您將無法通過檢查器看到它。 檢查器將向您顯示插入頁面中的圖像的屬性，但不會向您顯示該圖像內容的詳細信息。

為此，有一些工具，例如 Font Squirrel Matcherator 或 Whatfontis.com，可以幫助您識別圖像中使用的字體。 為此，您必須在這兩個工具中下載圖像（在 whatfontis.com，您也可以指明圖像的 URL），然後選擇包含您要識別的字母的圖像部分。

這兩個工具都會向您顯示與所選文本大致匹配的一整套字體。 但是，如果您懷疑這不是完全匹配，您可以在谷歌上搜索與該工具指示的字體相似的字體，您將看到您得到的結果。

傑瑪·埃文斯 (Gemma Evans) 在 Unsplash 上的特色圖片。