css - QtWebkit渲染非标准字体，斜体和普通切换

Question

我正在尝试通过@font-face 在 QtWebkit 中使用自定义字体，但它仅在 Windows 上无法正常工作。

这是我的代码示例:

@font-face {
    font-family: 'LatoBoldItalic';
    src: url('../fonts/Lato-Italic.ttf') format('truetype'); 
    font-style: italic;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'LatoItalic';
    src: url('../fonts/Lato-Light-Italic.ttf') format('truetype'); 
    font-style: italic;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Light.ttf') format('truetype'); 
    font-style: normal;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}    
@font-face {
    font-family: 'LatoBold';
    src: url('../fonts/Lato-Regular.ttf') format('truetype'); 
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}


body{
    font-family: "Lato";
}
h1{
    font-family: 'LatoBold';
}
h2{
    font-family: 'LatoItalic';
}

所以，我的内容和 h1 应该是普通的 Lato，只有我的 h2 是斜体。

它在 Mac Os 上工作，但斜体和普通字体在 Windows 上切换。我尝试了几种方法，通过删除所有斜体字体(甚至从文件系统中)，但文本是以斜体呈现的样式...

我也尝试过只声明一种 Lato 字体，并为每种粗细和样式调用不同的 .ttf，但我遇到了同样的问题。

也尝试使用从网站加载的 Lato 字体，同样的问题。

我不太明白这里的问题是什么。

更多有用的信息:

• Windows 7

• Qt 5.3.1

• 文件是从文件系统加载的，不是在线的(file://.....)

谢谢:)

Answer 1

这不是QT的问题(注意:现代浏览器经常使用woff)

你在@font-face中添加了font-style: italic;，这需要在Webkit/Chrome中添加font-style: italic; 也在你的选择器中。

例子:

@font-face {
    font-family: 'LatoItalic';
    src: url('../fonts/Lato-Light-Italic.ttf') format('truetype'); 
    font-style: italic;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
h2{
    font-family: 'LatoItalic';
    font-style: italic;
}

注意:woff 用于现代浏览器:Chrome 6+、Firefox 3.6+、IE 9+、Safari 5.1+ 注意:尝试使用现代格式(和替代格式)，请参阅:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}