html - 斜体 "g"字符右侧被截断

Question

我的 CSS 结构如下:

index.html
css
--fonts
----roboto
------roboto-italic-demo.html
------roboto-italic-webfont.woff
------roboto-italic-webfont.woff2
------stylesheet.css
--main.css

stylesheet.css 包含以下 CSS

@font-face {
    font-family: 'robotoitalic';
    src: url('roboto-italic-webfont.woff2') format('woff2'),
         url('roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

roboto-italic-demo.html 是一个使用 font-family: 'robotoitalic'; 显示整个字母字符的演示页面。这里的 g 看起来应该是这样。

main.css 包含以下 css

@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/roboto/roboto-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'robototest2';
    src: url('fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
         url('fonts/roboto/roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

index.html 包含 main.css 样式表。使用 font-family: 'roboto'; font-style: italic; 切断 g 字符的右侧。使用 font-family: 'robototest2'; 也会剪切 g 字符的右侧。

以下是我为解决该问题所做的尝试:

• 重新下载roboto-italic-webfont.woff && roboto-italic-webfont.woff2

• 将 “Comic Sans MS” 作为备用，以确保我实际上使用的是 roboto 或 robototest2

• 添加字母间距

• 将 g 字符放在带有填充的范围内

编辑:

这个问题被标记为重复。链接的问题是指从其容器中突出的文本，因为这个问题是关于一个字符被截断，无论它在任何标签中的位置如何。例如，这个 html

<p><em>This g is being cut off on its right side</em></p>

结果

Answer 1

我遇到了同样的问题，同样是 Roboto，在正常粗细下使用斜体。我使用的 Roboto 版本是从 Font Squirrel 自行托管和下载的。

我尝试了 Google 托管的 Roboto 版本，它正确地呈现了“g”，所以我认为我的字体版本一定有问题。我在一个单独的 Stack Overflow 问题上找到了这个答案:https://stackoverflow.com/a/15976457/1786681建议将你自己的 ttf 字体上传到 Font Squirrel 的 webkit 生成器，选择“专家”选项，并保留所有默认值，除了将“Em Square Value”更改为“2162”。我从 Google 下载了 Roboto 的 .ttf 文件并完成了这些步骤，瞧!我的斜体“g”现在呈现得很漂亮!