Question

我已经阅读过很多人在浏览器中没有加载真正的斜体字体样式时出现问题，另一方面我希望强制浏览器使用Faux Italic。这是我的css代码：

h2 {
    font-family:"Bell MT", Georgia, serif;
    font-size:31px;
    font-style:oblique;
    font-weight:normal;
    color:#e19614;
}

当我将font-weight设置为粗体或更大时，生成的效果是所需的倾斜字体，但每当我将重量设置为正常（这是所需的设置）时，它会回到真正的斜体字体，在这种情况下（贝尔MT）非常不同..

有什么建议吗？

Answer 1

丑陋的黑客使用css转换：

http://jsfiddle.net/DQnVS/1/

span {
    display: inline-block;
 -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
     -ms-transform: skewX(-30deg);
      -o-transform: skewX(-30deg);
         transform: skewX(-30deg);
}

Answer 2

要强制浏览器使用仿斜体，请根据情况参数，在指定的字体系列不包含斜体或斜体字体时，使用请求italic或oblique的字体设置。

如果您要求使用粗体斜体Bell MT，您就是这样做的。 Bell MT字体系列具有普通，粗体和斜体字体，但没有粗体斜体。因此，浏览器必须拒绝执行您的请求或通过算法倾斜粗体字体或通过算法粗体斜体字体伪造它。

正如biziclop的回答所示，你可以使用CSS转换来做你的自己的假（虚假）斜体，或者更确切地说是伪斜体。但是，如果浏览器可以使用请求的斜体或斜体，则无法强制浏览器使用自己的伪造机制。

更新： @ JonHanna的回答显示，通过在@font-face规则中指定字体而不指定斜体字体，可以欺骗浏览器使用伪斜体。所以“浏览器可用”是相对的。

P.S。假斜体/斜斜与斜斜不一样。印刷工作者可以设计一种倾斜的字体，这不仅仅是一种倾斜的普通字体，而且不是经典的斜体字样。字体是否被分类为斜体或倾斜在很大程度上是品味和命名的问题。对于大多数实际用途，CSS关键字italic和oblique是同义词，因为浏览器在请求倾斜但是不存在时使用斜体，反之亦然。只有当字体具有斜体字体和倾斜字体时，它们才会真正不同，这种情况很少见。

Answer 3

您可以通过别名字体来实现。只有当字体不能替换为您建议的字体时才能使用此功能（此处不能使用serif这样的全能型关键字），但您可以通过使用保证网络字体。网络字体可以用作备份，因此您无需始终下载它。

让我们首先尝试没有备份：

@font-face {
  font-family: 'Fake Oblique Font';
  font-style: normal;
  font-weight: 400;
  src: local('Bell MT'), local('Georgia');
}
@font-face {
  font-family: 'Fake Oblique Font';
  font-style: normal;
  font-weight: 700;
  src: local('Bell MT Bold'), local('Georgia Bold');
}
*
{
    font-family: 'Bell MT Bold', Georgia, serif;
}
.oblique
{
    font-style: oblique;
    font-family: 'Fake Oblique Font';
}

在弄清楚＆＃34;假斜体字体＆＃34;有效，浏览器只有这些声明中提到的表格可用。我的机器上没有可用的Bell MT，但这确实成功地使用格鲁吉亚和乔治亚大胆的强制倾斜风格：http://jsfiddle.net/k1w1zt0g/特别是x之间的local()最明显不同斜体和假斜面。

如果这不起作用，如果所提到的字体都不可用，因为serif声明无法使用serif等通用标签。一个人可以决定与之生活在一起（如果你重新回到@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400; /* There are lots of pros and cons about just how you allow or disallow local fonts to be used. I'll go with allowing it here, to show it works throughout, but by all means change this to local('☺') to block local use, or so on. */ src: local('Noto Serif'), local('NotoSerif'), url(http://fonts.gstatic.com/s/notoserif/v4/Lpe_acwQmwESv6cuCHE3rfesZW2xOQ-xsNqO47m55DA.woff) format('woff'); } @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 700; src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPYSoAJ3FdnHwSRdilZRLja4.woff) format('woff'); } @font-face { font-family: 'Noto Serif'; font-style: italic; font-weight: 400; src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(http://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNzxsxEYwM7FgeyaSgU71cLG0.woff) format('woff'); } @font-face { font-family: 'Noto Serif Fake Oblique'; font-style: normal; font-weight: 400; src: local('Noto Serif'), local('NotoSerif'), url(http://fonts.gstatic.com/s/notoserif/v4/Lpe_acwQmwESv6cuCHE3rfesZW2xOQ-xsNqO47m55DA.woff) format('woff'); } @font-face { font-family: 'Noto Serif Fake Oblique'; font-style: normal; font-weight: 700; src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPYSoAJ3FdnHwSRdilZRLja4.woff) format('woff'); } * { font-family: 'Noto Serif'; } .oblique { font-family: 'Noto Serif Fake Oblique'; /* Force faking, by only providing non-italic, non-oblique forms. */ font-style: oblique; }那么你无论如何都要退回去，所以你已经有点偏离了你所瞄准的设计），或使用webfont保证。 MS确实授权Bell MT用于网络使用，但我不会仅仅为了证明这一点而授权它，所以我将使用来自谷歌字体的Noto Serif：

Noto Serif是她的一个方便选择，因为它提供了一整套正常，粗体，斜体和粗体斜体。这使我能够展示更全面的变化。删除下面代码使用的粗体斜体字体，并看到浏览器做了更多伪造以伪造它，当它被使用时用虚线粗体显示：

{{1}}

http://jsfiddle.net/k1w1zt0g/1/

Answer 4

我实际上最喜欢Biziclop's Answer，所以我开始讨论他们提供的this jsfiddle。这就是我想出来的。

HTML

p {
  font-size: 100%;
}

p span {
  display: inline-block;
  -ms-transform: skewX(-10deg) translateY(-1px);
  -o-transform: skewX(-10deg) translateY(-1px);
  transform: skewX(-10deg) translateY(-1px);
  font-size: 90%;
  opacity: 0.65;
  padding-top: 0.25px;
  -ms-text-shadow: 1px 1px 0.1px rgba(0,0,0,0.004);
  -o-text-shadow: 1px 1px 0.1px rgba(0,0,0,0.004);
  text-shadow: 1px 1px 0.1px rgba(0,0,0,0.004);
}

CSS

string path = Path.Combine(AppDataPath, "helvetica.ttf");
BaseFont baseFont = BaseFont.CreateFont(path, BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED); 
Font font = new Font(baseFont, fontSize, Font.NORMAL);

结果JSFiddle - http://jsfiddle.net/ttxhtks0/

我从this post中删除了文本阴影解析方法。如果它坚持下来，请告诉我。

强制浏览器使用Faux斜体（斜）而不是真正的斜体

4 个答案:

HTML

CSS