我的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>
结果
答案 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”现在渲染得很漂亮!