回答編集履歴

1

蛇足

2020/12/15 04:06

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36134

test CHANGED
@@ -41,3 +41,43 @@
41
41
  > That means the Catamaran font uses 1100 + 540 units in a 1000 units em-square, which gives a height of 164px when setting font-size: 100px. This computed height defines the content-area of an element and I will refer to this terminology for the rest of the article. **You can think of the content-area as the area where the background property applies**
42
42
 
43
43
  [Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)
44
+
45
+
46
+
47
+ # 蛇足
48
+
49
+
50
+
51
+ 上記記事にあった、この言葉を最後に書いておきますね。
52
+
53
+
54
+
55
+ > **It becomes obvious that setting line-height: 1 is a bad practice.** I remind you that unitless values are font-size relative, not content-area relative, and dealing with a virtual-area smaller than the content-area is the origin of many of our problems.
56
+
57
+ [Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)
58
+
59
+
60
+
61
+ __line-height: 1 がバッドプラクティスであることは明らかです。__
62
+
63
+
64
+
65
+ ---
66
+
67
+
68
+
69
+ ちなみに、その後にこんなことも書いてあります。
70
+
71
+
72
+
73
+ > But not only line-height: 1. For what it’s worth, on the 1117 fonts installed on my computer (yes, I installed all fonts from Google Web Fonts), 1059 fonts, around 95%, have a computed line-height greater than 1. Their computed line-height goes from 0.618 to 3.378. You’ve read it well, 3.378!
74
+
75
+ [Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)
76
+
77
+
78
+
79
+ __参考までに私がインストールした1117個のフォント(ええ、Googleフォントは全部インストールしてます)ですが、...... line-height は 0.618 から 3.378 でした。よろしいですか?3.378です!__
80
+
81
+
82
+
83
+ ええと、どうすれば?