首頁 > web前端 > css教學 > 檢查網頁上使用的字體

檢查網頁上使用的字體

PHPz
發布: 2024-07-17 06:28:49
原創
1115 人瀏覽過

情況

因為我目前正在學習next.j。我正在學習下一個團隊創建的課程 (https://nextjs.org/learn)。

有一個與字體和圖像最佳化相關的部分。
老實說,我從來沒有太關注字體以及網頁上的某個元素使用哪些字體。
但透過閱讀這些材料,我意識到你能夠做到這一點。您可以找出某個元素使用了哪些字體。您可以在頁面上擁有不只一種自訂字體,這可能很有用。

當我使用 Chrome 作為預設瀏覽器時,我開啟了開發工具並檢查了使用的字體。

chrome dev tools

這看起來很糟糕並且沒有太多資訊。

但是我在 Firefox 中做了同樣的事情,而 Firefox 似乎有更多關於字體的選項。您可以透過它的編輯器更改大小、行高、間距、粗細。這似乎非常有用,尤其是當您試圖找出哪種字體屬性最適合某個元素時。

Check used fonts on a webpage

我的想法

這些關於字體的發現提醒我,當我過去在佈局方面遇到一些麻煩時,我可以在 Firefox 中比在 Chrome 中進行更好的調試。
Firefox 似乎更關心 CSS 的東西,以使 FE 開發比 Chrome 更流暢。我想我下次在做 CSS 工作時應該考慮到這一點,並使用 Firefox 作為預設瀏覽器!

乾杯。祝你有美好的一天!

以上是檢查網頁上使用的字體的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板