文字排版

文字排版應該是網站最重要的基石,讓人開心的是,CSS 仍不斷進化支援已經相當良好的文字排版功能。

可變式字型 (Variable Fonts) 是目前火紅的話題。我們還在等待真正響應式字體 (responsive type) 的同時,這方面的持續進展絕對值得關注。

外圍圓圈的大小代表知道某功能的使用者總數,而內圈代表實際在使用的人數。 將滑鼠移到節點上,就可以看到詳細資料,還有代表此問卷答題者總數的區塊

「全體」這欄顯示每一項技術的整體使用情況(也就是答題者選取了「會再使用」或「不會再使用」), 而接下來的幾欄是依照「資歷年數」分組的使用比例。

比較亮的粉紅色背景,代表該分組比全體平均比例還要高。

資歷年數
全體
<1
1~2
2~5
5~10
10~20
>20
@font-face
88.43%
70.04%
82.45%
90.28%
95.68%
97.81%
94.35%
Line Breaking Properties
81.6%
57.27%
72%
86.96%
90.66%
91.91%
90.82%
initial-letter
26.67%
14.1%
14.63%
21.83%
28.7%
37.24%
43.53%
Variable Fonts
26.42%
27.75%
31.35%
29.3%
25.68%
20.89%
23.53%
font-variant
23.44%
15.42%
12.64%
19.03%
24.07%
31.59%
37.88%
與全體使用情況的差距:
-20%-10%0+10%+20%

@font-face

完成答題百分比 99.4% (11249)
完成答題百分比 99.4% (11249)
百分比%數量Σ
已經在用92.84%
知道是什麼,但沒用過4.83%
沒聽過/不確定那是什麼1.72%

The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

Variable Fonts

完成答題百分比 99.43% (11252)
完成答題百分比 99.43% (11252)
百分比%數量Σ
已經在用25.68%
知道是什麼,但沒用過43.92%
沒聽過/不確定那是什麼29.83%

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference. This article will give you all you need to know to get you started using variable fonts.

Line Breaking Properties

完成答題百分比 99.47% (11257)
完成答題百分比 99.47% (11257)
百分比%數量Σ
已經在用87.48%
知道是什麼,但沒用過8.36%
沒聽過/不確定那是什麼3.63%

line-break CSS 屬性能夠設定在中文、日文和韓文(CJK) 的文字中,遇到標點或符號時該如何斷行。

深入詳情

font-variant

完成答題百分比 99.21% (11228)
完成答題百分比 99.21% (11228)
百分比%數量Σ
已經在用24.15%
知道是什麼,但沒用過28.36%
沒聽過/不確定那是什麼46.7%

The font-variant CSS property is a shorthand for the longhand properties font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. You can also set the CSS Level 2 (Revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.

initial-letter

完成答題百分比 99.38% (11247)
完成答題百分比 99.38% (11247)
百分比%數量Σ
已經在用28.21%
知道是什麼,但沒用過35.48%
沒聽過/不確定那是什麼35.69%

The initial-letter CSS property sets styling for dropped, raised, and sunken initial letters.

Learn Responsive Web Typography

Learn how to implement web fonts and create a modern, scalable typographic system to give the best reading experience for desktop and mobile devices
感謝贊助我們的合作夥伴! 深入詳情。