CSS中的font-style: italic与oblique有何区别？

Question

这两者之间有什么区别：

font-style:italic
font-style:oblique

我尝试使用W3Schools编辑器，但无法区分。

我错过了什么？

- rajakvk

---

未来的消息：Wikipedia有一个很好的例子，展示了italic和oblique之间的区别。 - Cornstalks

晚些时候的跟进问题（或者也许应该放在用户体验中？）：专门选择斜体变体的真实用例是什么？斜体变体不是“始终”更可取吗？ - KlaymenDK

@KlaymenDK：诚然，这是一个狭窄的用例，但我可以想象在像素化输出的某些小字体大小中，为了可读性而更喜欢使用斜体字体：例如，在小型形态屏幕上使用6pt到8pt字体；一些斜体形式具有较细的笔画和更多的装饰，可能会降低可读性，与简单的“倾斜”相比。 - Dan H

Answer 1

在纯粹的（字体设计师）意义上，斜体是指将罗马字体倾斜一定角度（通常为8-12度）。而意大利体是由字体设计师创建的，其中特定字符（尤其是小写字母a）绘制得不同，以创建更具书法感和倾斜的版本。

一些字体工作室会随意创建不一定获得设计师认可的斜体...有些字体本来就不适合斜体或者倾斜处理...但人们仍然这么做了。正如你所知，一些操作系统将在点击“斜体”图标后，动态地使字体倾斜，从而创建斜体。这并不是一个愉快的视觉体验。

最好只在确定该字体已设计出意大利体时才指定使用意大利体。

- jcburns

---

值得注意的是，几乎没有一种字体系列同时指定了斜体和倾斜体，大多数渲染引擎会在指定的字体不可用时提供另一种字体。 - SingleNegationElimination

这个答案没有涉及功能差异、互斥性或语义差异。 - ahnbizcad

例如，在使用西里尔字体时，斜体字符通常会非常不同，更像草书形式，而倾斜形式只是倾斜。 - moodymudskipper

渲染引擎如果我说“italic”，但字体只有“oblique”版本可用，应该怎么做？反之亦然？ - Michael

@SingleNegationElimination 你的评论本应成为答案，因为它涉及到CSS特别的技术问题。这里选择的“答案”更多是关于排版方面的。 - Vun-Hugh Vaw

Answer 2

通常，斜体字是字体的特殊版本，而倾斜版本只是将常规版倾斜一点。因此，它们都是倾斜的并且与常规字体相关，但斜体字将具有专门为其制作的特殊字形。

大多数字体都具有斜体或倾斜版本；我从未见过既有斜体又有倾斜版本的字体。（如果您有斜体版本，为什么还要使用倾斜版本呢？）

- Anthony Mills

---

Latin Modern是一种著名的字体，具有明显的斜体和意大利体风格。在这个tex.stackexchange问题中，展示了这些风格。 - undefined

Answer 3

与斜体和倾斜字体类似，当比较斜体和仿斜体时同样会看到差异。

在使用font-style: italic;将正常字体倾斜时，你会看到仿斜体，而真正的斜体字体是专门设计成斜体的。

下面两个ll​中的底部清晰地显示了这种差异。

查看示例

- robstarbuck

---

你的意思是斜体等同于伪斜体吗？ - zwcloud

是的，如果既没有斜体字也没有倾斜字体可用，则结果将显示相同（至少在此示例中的 Chrome 浏览器中）。http://next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview - robstarbuck

没有视觉辅助工具，我无法完成这个答案，谢谢。 - Max Alexander Hanna

Answer 4

斜体（Oblique type，或称倾斜、斜体）是一种稍微向右倾斜的字体形式，与斜体字体相同地使用。然而，与斜体不同的是，它不使用不同的字形；它使用与罗马字体相同的字形，只是扭曲了。

进一步阅读： css font style oblique vs italic

- Zubair1

Answer 5

根据mozilla developer CSS tutorial：

italic：如果有字体的斜体版本，则将文本设置为使用该版本；如果没有可用的版本，则使用 oblique 模拟斜体。

oblique：将文本设置为使用模拟的斜体字体版本，通过倾斜正常版本创建。

由此，我们可以推断出，如果没有字体的斜体版本可用，italic和oblique的行为方式相同。由于 W3Schools 代码片段没有指定任何特定的 font-family，我认为使用默认字体；一个可能没有斜体版本的默认字体。 但是如何使字体的斜体版本可用？ 这意味着我们至少有两个相同字体的版本，一个是“常规”版本，另一个是斜体版本。可以在<style>部分使用@font-face规则指定它们。请简要阅读：developer.mozilla，w3schools，tympanus.net。如您所见，该字体作为文件加载，可以具有以下扩展名：eot、otf、woff、truetype。

到目前为止，我发现了两种链接字体文件的方法：

字体文件的绝对URL：（来自tympanus.net的代码片段）

`@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), 
 url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

 @font-face {
 font-family: 'Open Sans';
 font-style: italic;
 font-weight: 400;
 src: local('Open Sans Italic'), local('OpenSans-Italic'), 
 url 
 (http://themes.googleusercontent.com/static/fonts/opensans/v8/
 xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
 format('woff');
 }`

请注意，两种情况下我们都有font-family: 'Open Sans'，这基本上定义了相同的字体；但在第一种情况下，我们有font-style: normal;，而在第二种情况下，我们有font-style: italic;。还要注意 URL 指向不同的文件。现在，回到 w3schools 代码片段，浏览器是如何区分font-style: normal和font-style: italic的

使用相对路径到字体文件：（来自metaltoad.com的代码片段）

不必为每种字体定义单独的font-family值，可以为每种字体使用相同的font-family名称，并定义匹配的样式，例如：

`@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`

在这种情况下，.eot 文件必须与 html 页面存储在同一文件夹中。再次注意，font-family 是相同的，font-style 不同，并且 urls 不同：Ubuntu-R-webfont 与 Ubuntu-I-webfont。 字体斜体版本示例： ctan.org ：这是提供了不同风格/粗细的同一字体的不同文件的示例。粗体或斜体都不是即时计算的，它们是从其特定文件中检索出来的。

- wile the coyote

---

我的回答解决了问题的第二部分：“...但是我无法区分。我错过了什么？” - wile the coyote