特定字体以某种方式禁止Webkit浏览器中的虚假斜体

Question

我正在使用字体PT Sans Narrow，它只有常规和粗体。因此，我需要浏览器在必要时使用虚假斜体。但是，只有非webkit浏览器才会这样做。看到这张图片：

然而，问题似乎特别在于此字体，因为其他字体工作正常。 （请参阅此JSFiddle：http://jsfiddle.net/pEVj7/）此小提琴中的比较字体是使用Font Squirrel上的相同设置生成的。

我需要能够简单地使用如下所示的内容，如果没有可用的浏览器，请使用虚假斜体。

<i>My custom italic text</i>

P.S。我知道，假斜体可能看起来不一样或不同，但在这种情况下，它们比完全不能使用斜体更好。其次，谷歌Webfonts不是一个选项，因为它在Chrome中渲染效果不佳。

Answer 1

经过大量的研究和测试，我已经开发了一个不错的选择。虽然我仍然不知道为什么webkit浏览器不使用伪斜体，但我能够使用一些CSS和jQuery重新创建伪斜体。首先，这里是我想要将此技术应用于的HTML代码：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Fusce aliquam
mollis pulvinar. In tincidunt, libero vel auctor scelerisque, ligula erat
tempus neque, eu ultrices justo erat a risus.</i> Nulla facilisi. Praesent
porttitor magna sed ultricies lacinia.

首先，我需要在类italic的范围内包装每个单词。 （为什么不久将对每个单词进行处理。）我使用以下jQuery代码来实现此目的：

$(document).ready(function(){
    $("i").each(function(){
        $element = $(this);

        var words = $element.text().split(" ");
        $element.empty();

        $.each(words, function(i, v) {
            $element.append($("<span class='italic'>").text(v));
            $element.append(" ");
        });
    });

    $("em").each(function(){
        $element = $(this);

        var words = $element.text().split(" ");
        $element.empty();

        $.each(words, function(i, v) {
            $element.append($("<span class='italic'>").text(v));
            $element.append(" ");
        });
    });
});

然后，使用CSS3，我可以将文本倾斜10度，但仅适用于webkit浏览器：

span.italic{
    display:inline-block;
    -webkit-transform:skewX(-10deg);
}

这让我想到为什么每个单词都必须包含在自己的span中。为此，显示必须为inline-block;因此，如果斜体短语长于一行，它将不会在段落内正确包装，除非每个单词都有自己的跨度。

---

缺点

我可以看到使用它的一个问题是，如果webkit浏览器开始支持伪斜体，它将是额外的倾斜。另一个问题是，这仅适用于<i>和<em>标记，而不适用于所有斜体文本。最后，可以删除<i>标记中包含的所有图片或其他格式。

Answer 2

问题似乎与字体的SVG格式有关。如果省略它，Chrome将使用WOFF格式并在其上应用合成斜体（仿斜体）。

我首先从Google下载PT Sans Narrow，使用默认设置在其上运行FontSquirrel生成器，并在生成器生成的示例HTML文件中添加斜体文本进行测试。这很好用。当我选择SVG选项重新运行生成器时，结果是相同的，查看Chrome开发人员工具中的网络窗格显示使用了WOFF文件。但是，当我从CSS文件中删除其他格式时，只留下对SVG文件的引用，文本显示为直立（尽管开发人员工具仍然说它是PT Sans Narrow，斜体）。

检查你的jsfiddle，我看到两者 SVG文件和加载了WOFF文件，虽然是传递的text / html，但仍然被解释为字体文件。我不知道那里发生了什么。它可能与jsfiddle的内部有关。