Question

我有webafe字体格鲁吉亚，这是我想要的美丽。

我遇到的唯一问题是字体的底部没有对齐。

<style>
.georgia {
    font-family:georgia;
    font-size:1.9em;
}
</style>
<span class="georgia">
    1234567890
</span>

正如你在小提琴中看到的那样，1,2,6和8都比其他部分开始略高。

问题： 我如何渲染格鲁吉亚，这一切都从一行开始，同时仍然能够使用 XX em 设置网站。

我不介意：

拆分字符串
设置不同的课程

我只需要一个可行的解决方案，仍然允许动态调整大小。

Answer 1

这只是字体的样式，技术上所有的字体字符都排成一行（如果你突出显示它会显示字体字符的高度）。

即使分割字体，您也无法始终排列Georgia字体，因为偏移量必须根据字体大小而变化。这可以使用em来实现，但至少它会是hacky，并且很难通过浏览器一致地工作。

此外，更改字体位置会导致Kerning问题。

然而，格鲁吉亚还有另一种类似的字体，它确实排成一行：

格鲁吉亚融合了Clarendon风格字体的影响

http://en.wikipedia.org/wiki/Clarendon_(typeface)

Answer 2

对于网络安全解决方案，我最终实现了这个： http://jsfiddle.net/JW7F8/2/

<style>
.georgia {
    font-family:georgia;
    font-size:1.9em;
}
.subitx {
        position:relative;
        top:0.18em;
        }
.subity {
        position:relative;
        top:0.13em;
        font-size:1.2em
        }
</style>
<span class="georgia">
    <span class="subity">1</span><span class="subity">2</span>345<span class="subitx">6</span>7<span class="subitx">8</span>9<span class="subity">0</span>
</span>

唯一的耻辱是大小的字体比其他字体更大。

我真的希望有更多网络安全字体可以跨浏览器工作...... 叹息

Answer 3

Georgia字体具有旧式数字，即高度不同的数字，也可能延伸到基线以下。

人们在网页上使用的大多数字体都有现代风格的“衬里”数字，所有数字的高度相同，大致与大写字母相同。

某些字体包含两者。最近有可能在CSS中，在几个浏览器中使用font-feature-settings来选择这些替代方案。但格鲁吉亚只有旧式数字。

如果您认为这样的基本功能不适合您的文字，最好选择不同的字体。

但是，在WebKit浏览器（Chrome，Safari）上，使用@font-face（对于本地字体，未嵌入）和unicode-range，您可以指定从其他字体中获取数字。它技术上很简单，但并不是一个好主意：

@font-face {
  font-family: Georgiax;
  src: local("Times New Roman");
  unicode-range: U+30-39;
}
@font-face {
  font-family: Georgiax;
  src: local("Georgia");
  unicode-range: U+0-29, U+40-10FFFF;
}

然后你就可以使用font-family: Georgiax，就好像它是一个真正的字体系列一样。但正如所说的那样，除了WebKit浏览器之外，这种技术不受支持，从另一种字体中取数字意味着排版错误。

P.S。格鲁吉亚不是网络安全的。没有字体。例如，你不会在Android上找到它。

字体格鲁吉亚起始于不同的高度

3 个答案: