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是Italic。

它适用于Mac Os，但在Windows上切换斜体和普通字体。通过删除所有Italic字体（甚至从文件系统中）我尝试了几件事，但是文本是用Italic呈现的样式......

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

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

我真的不明白这里有什么问题。

更多有用的信息：

Windows 7
Qt 5.3.1
文件是从文件系统加载的，而不是在线的（文件：// .....）

谢谢：）

Answer 1

这不是QT的问题（注意：现代浏览器经常使用woff）

您在font-style: italic;中添加了@font-face，这也要求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 */
}

QtWebkit呈现非标准字体，斜体和正常切换

1 个答案: