谷歌字体——谷歌浏览器中的部分呈现答案

【问题标题】：Google fonts — partial rendering in Google Chrome谷歌字体——谷歌浏览器中的部分呈现
【发布时间】：2018-03-24 18:03:20
【问题描述】：

我使用带有西里尔字母的 Google Open Sans 字体 (https://fonts.google.com/specimen/Open+Sans)。如果我强调了单词（ ́ - font-set 中缺少重音符号），Google Chrome 只会呈现重音之后的部分。但是其他浏览器没有同样的问题。

渲染对比：我知道每个浏览器都有自己的渲染引擎，但我很想解决或避免这个麻烦。我该怎么办？

.open-sans-font {
  font-family: "Open Sans";
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&amp;subset=cyrillic" rel="stylesheet">
<div class="open-sans-font">
	<p> філігра́нний — несамови́тий </p>
	<p> філігранний — несамовитий </p>
</div>

【问题讨论】：

我不明白，两个屏幕截图显示的内容看起来一样，除了 Chrome 中的第一个 ф。您能否进一步说明您需要我们注意的事项？

标签： css google-chrome fonts webfonts google-webfonts

【解决方案1】：

我只是在我的 Google Web Fonts API 请求中添加了 “text=...чшщьюя́”。

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&text=АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯабвгґдеєжзиіїйклмнопрстуфхцчшщьюя́" rel="stylesheet">

原来重音符号属于latin-ext字符集

【讨论】：

【解决方案2】：

根据您的需要，确保该行的宽度相同。例如，我会为 <p> 开设一个班级

<p class="RenderTrouble">філігра́нний — несамови́тий</p>

然后在你的css中放

.RenderTrouble {
              max-width: 200px; /* Or how ever many pixels it is long */
}

应该这样做。唯一的问题是找到边缘渲染的像素长度。我来算一算； 1398 -19 = 1379 句子的长度是 1379px 所以做 css

.RenderTrouble {
              max-width: 1379px; /* Or how ever many pixels it is long */
}

无论如何，理论上是这样。它对我不起作用，所以我担心你不走运。我会继续努力看看能不能得到它
我放弃here

<img src="./Untitled.png" style="max-width: 210px; height: 120;">

【讨论】：

@PsyhoWolf，这是个好主意。但是，不幸的是，为每个句子创建图像成本太高。