Yazı tipi boyutu nasıl doğru bir şekilde tanımlanır

Aug 16 2020

spanTam olarak tanımlanmış bir yüksekliğe sahip bir eleman elde etmeye çalışıyorum (bu örnekte 23px). Ancak tarayıcı, öğeye bazı pikseller ekler.

Hayır paddingve hayır margin, daha büyük olan gerçek metindir. Metin yüksekliğini (ve bununla birlikte spanyüksekliğini de) nasıl elde edebilirim 23px?

Gereksinimler:

  • Çalışması için 23px'in yanında rastgele bir sayı bulmak için deneme yanılma (veya başka bir yöntem) yok.
  • Metnin tamamı, aralığın sınırları içinde kalmalıdır (içindeki metne bakılmaksızın).
  • Metin kaydırılırsa yöntem sezgisel olarak çalışmalıdır. (Yani eleman boyutu iki satırlı 46 piksel, üç satırlı 69 piksel vb. Olacaktır)

span {
  font-size: 23px;
  line-height: 23px;
  border: red dashed 1px;
}
<span>This element is ...x28 (...x30 with border), but should be ...x23 (...x25 with border).</span>

Yanıtlar

1 BodoThiesen Sep 11 2020 at 18:27

Alohci'nin bir yorumda verdiği cevap:

Bunu şu anda yapamazsınız. 23px ve yükselme ve alçalma yazı tipi ölçümlerine dayalı bir hesaplama yapmanız gerekir. Ancak şu anda CSS, bu hesaplama için yazı tipi ölçümlerini göstermemektedir. Yazı tipi ölçütlerini ortaya çıkarma planları olduğuna inanıyorum, ancak ne şekilde olacaklarından emin değilim. Zaten hiçbir tarayıcı bunu desteklemiyor.