斜体“g”字符右侧被切断答案

【问题标题】：Italic "g" character right side is getting cut off斜体“g”字符右侧被切断
【发布时间】：2017-07-13 02:07:32
【问题描述】：

我的 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>

结果

【问题讨论】：

stackoverflow.com/questions/26296434/…

标签： html css fonts

【解决方案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”现在渲染得很漂亮！

【讨论】：