10

我读过很多人在浏览器无法加载真正的斜体字体时遇到问题，另一方面我想强制浏览器使用仿斜体。这是我的 CSS 代码：

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

当我将字体粗细设置为粗体或更大时，产生的效果是所需的倾斜字体，但每当我将粗细设置为正常（这是所需的设置）时，它就会回到真正的斜体字体，在这种情况下（Bell MT）很不一样。。

有什么建议么？

4

4 回答 4

5

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

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

正如 biziclop 的回答所表明的那样，您可以使用 CSS 转换来制作自己的假（假）斜体，或者更确切地说是假斜体。但是在请求的斜体或斜体对浏览器可用的情况下，没有办法强制浏览器使用它自己的伪造机制。

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

PS 假斜体/斜体与斜体不同。排版师可以设计一种倾斜字体，它不仅仅是一种普通的倾斜字体，也不是经典的斜体样式。字体是斜体还是斜体在很大程度上取决于品味和命名。对于大多数实际用途，CSS 关键字italic和oblique是同义词，因为浏览器在请求倾斜但不存在时使用斜体，反之亦然。只有当字体同时具有斜体字体和斜体字体时，它们才会真正不同，这很少见。

于 2012-06-15T05:46:45.407 回答
4

使用 css 转换的丑陋 hack：

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);
​}

​</p>

于 2012-06-14T23:47:05.697 回答
2

您可以通过别名字体来做到这一点。这仅在字体未被替换超出您建议的字体时才有效（serif此处不能使用 catch-all-of-type 关键字等），但您可以通过使用 web-font 来保证这一点。网络字体可以用作备份，因此您不需要总是下载它。

让我们先尝试不备份：

@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';
}

在研究“Fake Oblique Font”如何工作时，浏览器只有这些声明中提到的表格可用。我的机器上没有可用的 Bell MT，但这确实成功地使用了带有强制倾斜样式的 Georgia 和 Georgia Bold：http: //jsfiddle.net/k1w1zt0g/特别x是斜体和斜体之间最明显的不同假斜。

这不起作用的地方是，如果没有提到的字体可用，因为local()声明不能使用通用标签，如serif. 一个人可以决定接受它（如果你回退到serif那么你无论如何都会回退，所以你已经有点偏离你的目标设计了），或者使用 webfont 保证。MS 确实授权 Bell MT 用于网络使用，但我不会仅仅为了写证明而授权它，所以我将使用 Google Fonts 中的 Noto Serif 代替：

Noto 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;
}

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

于 2014-08-30T14:29:00.800 回答
1

我实际上最喜欢Biziclop 的答案，所以我开始摆弄他们提供的这个 jsfiddle 。这就是我想出的。

HTML

<p>Hello <span class="superitalic">SUPERITALIC!</span> World!</p>

CSS

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);
}

生成的 JSFiddle - http://jsfiddle.net/ttxhtks0/

我从这篇文章中删除了文本阴影分辨率解决方法。让我知道它是否成立。

于 2017-03-09T15:56:22.847 回答