2

我有适合我想要的 websafe 字体 georgia。

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

http://jsfiddle.net/JW7F8/

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

正如您在小提琴中看到的那样，1、2、6 和 8 的起点都比其他的高一点。

问题： 我怎样才能渲染格鲁吉亚，这一切都从一条线上开始，同时仍然能够使用XX em设置站点。

我不介意：

  • 拆分字符串
  • 设置不同的类

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

4

3 回答 3

5

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

即使通过拆分字体，您也无法始终如一地排列 Georgia 字体，因为偏移量必须根据字体大小而变化。使用 's 可以做到这一点em，但至少会很麻烦，并且很难跨浏览器始终如一地工作。

此外，更改字体位置会导致字距调整问题。

然而，Georgia 还受到了另一种类似的字体的影响，它确实是：

Georgia 融合了 Clarendon 风格字体的影响

http://en.wikipedia.org/wiki/Clarendon_(字体)

于 2012-11-16T10:13:19.133 回答
0

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

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

一些字体包含两者。最近，可以在 CSS 中的这些替代方案之间进行选择，在几个浏览器中，使用font-feature-settings. 但乔治亚州只有老式数字。

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

但是，在 WebKit 浏览器（Chrome、Safari）上，使用@font-face(for local fonts, not embedded) 和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 浏览器之外，这种技术不受支持，并且从另一种字体中获取数字意味着印刷错误。

PS Georgia 不是网络安全的。没有字体。例如，您不会在 Android 上找到它。

于 2012-11-16T12:37:20.530 回答
0

对于网络安全解决方案，我最终实现了这个：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>

唯一的遗憾是放大的字体比其他字体更粗。

我真的希望有更多可以跨浏览器使用的网络安全字体...叹息 ​</p>

于 2012-11-16T10:34:21.513 回答