我在使用“font-variant:small-caps”获取小型大写字母时遇到问题。这是我的发现和我经历的事情,排除了可能存在的问题:
text-rendering: optimizelegibility
,我也尝试将其重置为自动。font-feature-settings: 'smcp'
包括浏览器前缀,这些前缀不会渲染小型大写字母(只有第一个字母在所有浏览器中大写)我错过了什么吗?
修改
经过进一步研究后,我找到了一个修补程序,即将font-variant:small-caps
添加到@font-face
,如下所示:
@font-face {
font-family:'MYFONT';
src:url('../fonts/MYFONT.eot');
src:url('../fonts/MYFONT.eot?#iefix') format('embedded-opentype'),
url('../fonts/MYFONT.ttf') format('truetype'),
url('../fonts/MYFONT.woff') format('woff'),
url('../fonts/MYFONT.svg#myfont') format('svg');
font-variant:small-caps
}
事实证明只有堆栈受此影响。分配@font-face
之类似可以按预期工作,以Chrome支持的每种字体格式:
<style>
@font-face {
font-family:'MYFONTttf';
src:url('../fonts/MYFONT.ttf') format('truetype');
}
</style>
<div style="font-family:MYFONTttf; font-variant:small-caps">
works as expected, in small-caps
</div>
答案 0 :(得分:1)
我认为关键是奇怪的是,不要包含SVG格式的字体。仅仅包括WOFF和TTF似乎使它显示正常。
我使用Font Squirrel生成了各种字体文件,因此最终得到了.woff
,.ttf
,.svg
和.eot
个文件。我与字体相关的CSS是:
@font-face {
font-family: "foo";
src: url(/fonts/foo.eot);
src: url(/fonts/foo?#iefix) format('eot'), url(/fonts/foo.woff) format('woff'), url(/fonts/foo.ttf) format('truetype'), url(/fonts/foo.svg) format('svg');
font-weight: normal;
font-style: normal;
}
由Compass从:
生成 +font-face("foo", font-files("/fonts/foo.woff", "/fonts/foo.ttf", "/fonts/foo.svg"), "/fonts/foo.eot", normal, normal)
与Compass's SASS font-face guidelines保持一致。
删除对SVG的引用似乎解决了这个问题。我也试过切换TTF和SVG的顺序(打破指南针对字体文件的“推荐顺序”),但这没有帮助。
快速浏览一下,看起来Chrome在渲染SVG字体方面存在其他各种问题。这不是一个非常优雅的解决方案,但在Chrome解决其SVG问题之前可能是必要的。