斜体" g"性格右侧正在被切断

时间:2016-12-23 16:50:07

标签: html css fonts

我的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看起​​来应该是这样。

enter image description here

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字符的右侧。

enter image description here

以下是我尝试解决问题的方法:

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

  • "Comic Sans MS"作为后退,以确保我实际使用robotorobototest2

  • 添加了字母间距

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

编辑

此问题被标记为重复。链接的问题是指从容器中突出的文本,其中的一个是关于一个角色被切断的,无论它在任何标签内的位置。例如,这个html

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

结果

enter image description here

1 个答案:

答案 0 :(得分:0)

我有同样的问题,也有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”现在渲染得很漂亮!