首頁 web前端 css教學 CSS 中字體大小背後的真實故事是什麼:只是上升部分和下降部分的高度嗎?

CSS 中字體大小背後的真實故事是什麼:只是上升部分和下降部分的高度嗎?

Nov 09, 2024 am 04:04 AM

What's the Real Story Behind Font Size in CSS: Is it Just the Height of the Ascenders and Descenders?

確定CSS 中字母的實際高度:揭開真實的字體大小

儘管常見的假設是在CSS 直接對應於上升部分(某些字母的上部部分,如“h”和“l”)和下降部分的高度(字母的下部部分,如“g”和“y”),真實的測量可能更複雜。

歷史視角:Em

從歷史上看,「em」指的是刻在金屬上的單個字母的塊大小。由於大寫“M”通常佔據最大的空間,因此它的大小決定了整體“em”的大小。如今,字體開發人員在設計字體時不受實體限制,使「em」成為虛擬概念。

標準:OpenType 和 TrueType

在 OpenType 字體中,em 大小為設定為 1000 個單位,而在 TrueType 字體中,通常為 1024 或 2048。理想情況下,字體大小應使用「em」單位定義,它指的是字體的 x 高度,而不是像素高度。

單位轉換:點、Pica 和 PPI

「點」是排版中常用的度量單位。根據慣例,一個點的範圍可以是 0.188mm 到 0.4mm。 「異食癖」是一個較舊的單位,等於 12 點。不同螢幕解析度之間的“ppi”(每英吋像素數)差異很大。

瀏覽器渲染:跨實現的差異

儘管存在標準,但實際尺寸字體字形根據字體開發人員的設計方式以及不同瀏覽器的呈現方式而有所不同。例如,Apple Zapfino 腳本字體被放大,使小寫字母更清晰。

字體開發工具:探索基礎

為了更深入地了解字體大小,請考慮使用免費字體開發工具,例如 FontForge。這些工具可讓您創建自己的字體並嘗試不同的大小調整技術。

結論

了解 CSS 中字母的真實高度需要了解歷史慣例,字體標準和瀏覽器特定的渲染差異。透過利用上述資源,您可以更全面地了解網頁設計這個基礎主題。

以上是CSS 中字體大小背後的真實故事是什麼:只是上升部分和下降部分的高度嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局!恭喜Vue團隊完成了完成,我知道這是一項巨大的努力,而且很長時間。所有新文檔也是如此。

您可以從瀏覽器獲得有效的CSS屬性值嗎? 您可以從瀏覽器獲得有效的CSS屬性值嗎? Apr 02, 2025 pm 06:17 PM

我有人寫了這個非常合法的問題。 Lea只是在博客上介紹瞭如何從瀏覽器中獲得有效的CSS屬性。那樣的是這樣。

在CI/CD上有點 在CI/CD上有點 Apr 02, 2025 pm 06:21 PM

我說的“網站”比“移動應用程序”更合適,但我喜歡Max Lynch的框架:

在WordPress塊編輯器中使用Markdown和本地化 在WordPress塊編輯器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我們需要直接在WordPress編輯器中向用戶顯示文檔,那麼最佳方法是什麼?

帶有粘性定位的堆疊卡和一點點的雜物 帶有粘性定位的堆疊卡和一點點的雜物 Apr 03, 2025 am 10:30 AM

前幾天,我發現了科里·金尼文(Corey Ginnivan)網站上的這一點,當您滾動時,彼此之間的卡片堆放集。

比較瀏覽器的響應式設計 比較瀏覽器的響應式設計 Apr 02, 2025 pm 06:25 PM

這些桌面應用程序中有許多目標是同時在不同的維度上顯示您的網站。因此,例如,您可以寫作

如何將CSS網格用於粘頭和頁腳 如何將CSS網格用於粘頭和頁腳 Apr 02, 2025 pm 06:29 PM

CSS網格是一系列屬性的集合,旨在使佈局比以往任何時候都容易。像任何東西一樣,那裡有一點學習曲線,但是網格是

Google字體可變字體 Google字體可變字體 Apr 09, 2025 am 10:42 AM

我看到Google字體推出了新設計(Tweet)。與上一次大型重新設計相比,這感覺更加迭代。我幾乎無法分辨出區別

See all articles