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;
}

从您的示例中，对于Instance，

<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规则，但有   不同的范围，可以建立完整的人物覆盖范围   您的页面使用不同的字体。

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

<强> [编辑]

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

如何使font-face渲染更大？

2 个答案: