如何让字体渲染得更大？

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

描述符旨在帮助您使用以下字体： 没有完全覆盖页面中使用的字符。通过添加一个 unicode-range 属性可以指定为

@font-face

规则 字体涵盖的字符范围。

@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

规则，但使用 不同的范围，可以建立对字符的完整覆盖 您的页面使用不同的字体。

还有一篇由 Richard Ishida 撰写的很棒的 文章，关于

unicode-range

，并附有我发布在 JsFiddle 上的测试用例。

[编辑]

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

Answer 3

您可以使用您想要放大或缩小的 size-adjust

 的 

@font-face 描述符来实现此目的。

例如：

@font-face {
  font-family: "persianFont";
  src: url(./persianFont.ttf) format("truetype");
  size-adjust: 120%;
}