擴充套件參考線 深入理解字型

2021-10-08 22:55:30 字數 1348 閱讀 5034

font-size、line-height、vertical-align、font-family

文字是通過一些文字製作軟體製作的,比如fontforge

製作文字時,會有幾根參考線,不同的文字型別,參考線不一樣。同一種文字型別,參考線一致。

字型大小,設定的是文字的相對大小

文字的相對大小:1000、2048、1024

文字頂線到底線的距離,是文字的實際大小(content-area,內容區)

行盒的背景,覆蓋content-area

頂線向上延伸的空間,和底線向下延伸的空間,兩個空間相等,該空間叫做gap(空隙)

gap預設情況下,是字型設計者決定

top到bottom,叫做virtual-area(虛擬區)

行高,就是virtual-area

line-height:normal,預設值,使用文字預設的gap

文字一定出現一行的最中間——是錯誤的

content-area一定出現在virtual-area的中間

乙個元素如果子元素出現行盒,該元素內部也會產生參考線

baseline:該元素的基準線與父元素的基準線對齊

super:該元素的基線與父元素的上基線對齊

sub:該元素的基線與父元素的下基線對齊

text-top:該元素的virtual-area的頂邊,對齊父元素的text-top

text-bottom:該元素的virtual-area的底邊,對齊父元素的text-bottom

top:該元素的virtual-area的頂邊,對齊line-box的頂邊

bottom:該元素的virtual-area的底邊,對齊line-box的底邊

middle: 該元素的中線(content-area的一半),與父元素的x字母高度一邊的位置對齊。

行盒組合起來,可以形成多邊,每一行的區域叫做line-box,line-box的頂邊是該行內所有行盒最高頂邊,底邊是該行行盒的最低底邊。

實際,乙個元素的實際占用高度(高度自動),高度的計算通過line-box計算。

行盒:inline-box

行框:line-box

數值:相對於基線的偏移量,向上為正數,向下為負數

百分比:相對於基線的偏移量,百分比是相對於自身virtual-area的高度

line-box是承載文字內容的必要條件,以下情況不生成行框:

某元素內部沒有任何行盒

某元素字型大小為0

表單元素:基線位置在內容底邊

行塊盒:

行塊盒最後一行有line-box,用最後一行的基線作為整個行塊盒的基線。

如果行塊盒內部沒有行盒,則使用下外邊距作為基線。

參考線 深入理解字型

參考線 深入理解字型 font family 文字文字是通過製作檔案製作的 製作文字時有幾根參考線,不同文字參考線不一樣。同一種文字型別,參考線一致。font size 設定的是文字的相對大小 相對值取值 1000 2048 1024 文字頂線到底線的距離,是文字的實際大小 contenmt are...

參考線 深入了解字型

text top ascent 頂線 super 上基線 baseline 基線 sub 下基線 text bottom,descent 底線 字型大小,設定的是文字的相對大小 文字的相對大小 1000 2048 1024 文字頂線到底線的距離是文字的實際大小 content area,內容區 行盒...

深入理解字串

1 字串處理 5 n 9 string str helloworld str str.substring 5,10 即可求出world object equals 比較記憶體位址 string equals 比較內容 1.暫存器 2.棧3.堆 4.靜態儲存區 5.常量儲存區 宣告final stat...