斜体＆＃34; g＆＃34;性格右侧正在被切断

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＆amp;＆amp; 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生成器，选择“Expert”选项，并保留所有默认值，只更改“Em Square Value” “到”2162“。我从谷歌下载了Roboto的.ttf文件并完成了这些步骤瞧！我的斜体“g”现在渲染得很漂亮！