インライン要素で、行間の広いフォントの背景色の縦幅を狭めたい

Question

div {
	font-size: 30px;
	line-height: 1;
	width: 3em;
	margin: 5px;
}

div span {
	background-color: blueviolet;
	text-decoration: underline;
}

<article style="display: flex;">
	<div><span style="font-family: メイリオ;">◆メイリオ</span>です</div>
	<div><span style="font-family: 源真ゴシック;">◆源真ゴシック</span>です</div>
	<div><span style="font-family: 游ゴシック;">◆游ゴシック</span>です</div>
	<div><span style="font-family: ＭＳ ゴシック;">◆ＭＳ ゴシック</span>です</div>
</article>

ご覧のとおり、MSゴシック以外では「◆」をはじめとする上段の文字やアンダーラインが背景色の裏側に隠れてしまっています

これはメイリオ・源真ゴシック・游ゴシックら自体が行間の広めなフォントだかららしいのですが

• MSゴシックのように、背景色の縦幅をできるだけ文字にぴったりとさせるのはCSSでは難しいでしょうか？

• もしくはメイリオ・源真ゴシック・游ゴシックらの代用にある程度耐えうる、漢字が比較的豊富で行間の狭い日本語フリーフォントがあれば助かります

※表示するPC環境は固定ですので、多環境への配慮は無用です（Windows・Chrome）

Answer 1

この場合は、ascent-override descent-override を適用した font-face を定義すれば大丈夫です。

@font-face {
  font-family: Meiryo-low-height;
  src: local(Meiryo);
  ascent-override: 90%;  /* ここを適切に調整すること */
  descent-override: 10%; /* ここを適切に調整すること */
}

<div><span style="font-family: Meiryo-low-height;">◆メイリオ</span>です</div>

Answer 2

CSSインラインレイアウトモジュールレベル3では、インラインボックスの高さの基準を定めることができます。

5.2. Inline Box Edge Metrics: the text-edge property | CSS Inline Layout Module Level 3

ですので、text-edge: textでアセンダやディセンダを考慮したインラインボックスの高さとすることができるはずです。たぶん。

実装されれば。

---

現状では、手計算でline-heightを設定するしかないと思います。たとえば、メイリオだとおそらく1.5かと。

このツールを使って LineSpacingRate の値を調べてみると、**メイリオ, Meiryo UI, MeiryoKe_Gothic, MiryoKe_Console, ＭＳ ゴシック についてはそれぞれ 1.50, 1.27, 1.18, 1.00, 1.00 になっています。**なお、このツールではベースラインから上の部分をアセント(CellAscent)、下の部分をディセント(CellDescent)と呼んでおり、これらのアセント・ディセントの値は ttfname3.exe で表示されるアセンダ(Ascender)・ディセンダ(Descender)の値と一致しています。つまり Microsoft がアセンダと呼んでいるものは「欧文書体の基礎知識」に載っているアセンダの定義とは異っているわけです。

また、「フォント メトリックを取得する」では、CellAscent＋CellDescent の値を「セル高 LineSpacing」、セル高から空隙部分を引いた値を 「em高 EmHeight」と呼んでいます。FontInfo.exe では、(セル高)を(em高)で割って LineSpacingRate の値を求めていますから、この値から 1.00 を引いたものが内部レディング(Internal Leading)の割合を表しています。

つまり、メイリオには em高の 50% (1.50ー1.00＝0.50) にあたる内部レディングが含まれており、Meiryo UI には 27% の、MeiryoKe_Gothic には 18% の内部レディングがそれぞれ含まれていること、そしてＭＳ ゴシックや MiryoKe_Console には内部レディングがない (0%) ことが分かります。
ことば・その周辺 PC版「メイリオ(3)――メイリオ系フォントのアセンダ・ディセンダ(1)」

　

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

Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

蛇足

上記記事にあった、この言葉を最後に書いておきますね。

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.

Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

line-height: 1 がバッドプラクティスであることは明らかです。

---

ちなみに、その後にこんなことも書いてあります。

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!

Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

参考までに私がインストールした1117個のフォント（ええ、Googleフォントは全部インストールしてます）ですが、...... line-height は 0.618 から 3.378 でした。よろしいですか？3.378です！

ええと、どうすれば？

Answer 3

インライン要素を制御するにはdisplay要素を使うと指定した属性と同じふるまいをするので、テーブルセル属性にしてしまうとフォントごとのマージンが固定されます。あとは、そのマージンに対し、上下に同じ色でborder制御するといいのでは。

div span {
    background-color: blueviolet;
    text-decoration: underline;
    display: table-cell;
　　border-top: 6px solid blueviolet;
　　border-bottom: 6px solid blueviolet;

}

Comments

[amie8mie]

table-cellにすると文字どおりtable-cellとして扱われそうに思いながら試してみたものの、やはり質問文に載せた画像のようなインライン的な背景色（文字の部分だけ）にはなっておらず単純に四角い背景になってしまっているように見えますね…