如何使字体渲染更大？

Question

使用 CSS，我正在使用这一行来设置双语元素的样式：

 font-family:persianFont, englishFont;

persianFont 和 englishFont 都用@font-face 定义。问题是带有englishFont 的字符会显示得更大一些，因为字体是这样创建的。示例句子将呈现如下：

BIG_ENGLISH_WORDS_small_persian_BIG_ENGLISH_AGAIN...

所以，我的问题是如何使 persianFont 更大一点（使其具有更大的比例），以便以相同大小正确显示一行波斯语-英语双语句子?这有可能吗？还有其他解决办法吗？

提前致谢

Answer 1

我建议单独创建一个跨度并增加字体大小作为理想的解决方案。

如果我假设您的body 的默认font-size 为12px，那么您需要按比例增加跨度大小。

例如，

span{
     font-size:14px;
}

从您的示例中，例如，

<p>BIG_ENGLISH_WORDS_<span>small_persian</span>_BIG_ENGLISH_AGAIN...</p>

希望这会有所帮助。

PS：你可以通过创建一个类或一个 id 选择器来做同样的事情。

Answer 2

我终于明白你的意思了。我认为您应该查看unicode-range CSS 属性。它可能还没有足够的浏览器支持，但这也取决于您的目标受众。 Chrome 至少有很好的支持。

我记得在 24ways.org 上读过它。这是 Drew McLellan (http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/)

的文章摘录

unicode-range 描述符旨在帮助使用以下字体 没有完全覆盖页面中使用的字符。通过添加一个 @font-face 规则的 unicode-range 属性可以指定 字体覆盖的字符范围。

@font-face {
    font-family: BBCBengali;
    src: url(fonts/BBCBengali.ttf) format("opentype");
    unicode-range: U+00-FF;
}

在本例中，字体用于 U+00 到 U+FF，它从不令人兴奋的控制字符开始运行 Unicode 表的开头（感叹号等符号从 U+21) 一直到 ÿ U+FF – 基本拉丁语的范围 字符范围。

通过为同一个系列添加多个 @font-face 规则，但使用 不同的范围，您可以建立完整的字符覆盖范围 您的页面使用不同的字体。

还有一个很棒的article by Richard Ishida) 关于unicode-range 以及我在JsFiddle 上发布的测试用例。

[编辑]

因此，您的下一步是识别与波斯语相对应的 Unicode 代码点，并如上所述制定 CSS 规则，以这些代码点为目标并相应地更改字体大小。