字体样式：CSS 中的斜体与斜体

font-style: italic vs oblique in CSS

提问by rajakvk

What is the difference between these two:

这两者有什么区别：

font-style:italic
font-style:oblique

I tried using the W3Schools editorbut was unable to tell the difference.

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

What am I missing?

我错过了什么？

回答by jcburns

In the purest (type designer) sense, an oblique is a roman font that has been skewed a certain number of degrees (8-12 degrees, usually). An italic is created by the type designer with specific characters (notably lowercase a) drawn differently to create a more calligraphic, as well as slanted version.

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

Some type foundries have arbitrarily created obliques that aren't necessarily approved by the designers themselves... some fonts were meant not to be italicized or obliqued... but people did anyway. And as you may know, some operating systems will, upon clicking the 'italic' icon, skew the font and create an oblique on the fly. Not a pleasant sight.

一些字体代工厂随意创建了不一定经过设计师本人认可的斜体……有些字体本来就不是斜体或斜体……但人们还是这样做了。您可能知道，某些操作系统会在单击“斜体”图标时使字体倾斜并动态创建斜线。不是一个愉快的景象。

It's best to specify an italic only when you're sure that font has been designed with one.

最好仅在您确定字体已设计为斜体时才指定斜体。

回答by Anthony Mills

Generally, an italic is a special version of the font, whereas an oblique version is just the regular version inclined a bit. So both are slanted and related to the regular font, but an italic will have special letterforms made especially for it.

通常，斜体是字体的特殊版本，而斜体只是稍微倾斜的常规版本。所以两者都是倾斜的并且与常规字体相关，但是斜体会有专门为它制作的特殊字体。

Most fonts have either an italic or an oblique version; I've never seen one that has both. (If you have an italic version, why bother with an oblique version?)

大多数字体都有斜体或斜体版本；我从未见过两者兼而有之。（如果您有斜体版本，为什么还要使用斜体版本呢？）

回答by Zubair1

Oblique type (or slanted, sloped) is a form of type that slants slightly to the right, used in the same manner as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except distorted.

斜体（或倾斜、倾斜）是一种稍微向右倾斜的字体，用法与斜体相同。然而，与斜体不同的是，它不使用不同的字形；除了扭曲之外，它使用与罗马字体相同的字形。

Futher Reading:css font style oblique vs italic

延伸阅读：css 字体样式倾斜 vs 斜体

回答by robstarbuck

As with italicand oblique, the same difference is visible when comparing italicwith faux italic.

如斜体和斜，比较时相同的差值是可见的斜体用仿斜体。

You will see faux-italicswherever a normalfont is skewed with font-style: italic;whereas a true italic font is designed to be slanted.

您会在正常字体倾斜的任何地方看到仿斜体，而真正的斜体字体设计为倾斜的。font-style: italic;

The bottom of the two ll​s shows the difference clearly.

两个ll的底部清楚地显示了差异。

See Example

见示例

回答by wile the coyote

According to mozilla developer CSS tutorial:

根据mozilla 开发者 CSS 教程：

italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.

oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.

斜体：设置文本以使用字体的斜体版本（如果可用）；如果不可用，它将用斜体代替斜体。

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

From here, we deduce that if an italic version of the font is not available, both italicand obliquebehave the same way. Since the W3Schools code snippet does not specify any particular font-family, I believe a default font is used; a default font which probably does not have an italic version.

从这里，我们推断出如果字体的斜体版本不可用，斜体和斜体的行为方式相同。由于 W3Schools 代码片段没有指定任何特定的font-family，我相信使用了默认字体；可能没有斜体版本的默认字体。

But how to make an italic version of the font available?

但是如何使字体的斜体版本可用？

This means that we have at least two versions of the same font, a "regular" one, and an italic one. These can be specified in the <style>section with the @font-facerule. Please read briefly : developer.mozilla, w3schools, tympanus.net. As you can see, the font is loaded as a file, which can have the following extensions: eot, otf, woff, truetype.

这意味着我们至少有两个版本的相同字体，一个“常规”版本和一个斜体版本。这些可以在<style>带有@font-face规则的部分中指定。请简要阅读：developer.mozilla、w3schools、tympanus.net。如您所见，字体作为文件加载，可以具有以下扩展名：eot, otf, woff, truetype.

So far, i found two ways of linking the font file

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

absolute URL of the font file: (code snippet from 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');
 }`

Please notice that in both cases we have font-family: 'Open Sans', which basically defines the same font; but in the first case we have font-style: normal;, while in the second case we have font-style: italic;. Also note that the URLs point to different files. Now, going back to the w3schools code snippet, that's how the browser can distinguish between font-style: normaland font-style: italic

字体文件的绝对 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

using the relative path to the font file : (code snippet from metaltoad.com)

Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:

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

In this case, the .eotfiles must be stored in the same folder as the html page. Again, notice that the font-familyis the same, the font-styleis different, and also the urls are different: Ubuntu-R-webfont vs Ubuntu-I-webfont.

Example of an italic version of the font:

ctan.org:this is an example of how there are provided different files for different styles/weights of the same font. Neither bold or italic are computed on the spot, they are retrieved from their specific file.

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

您可以为每种字体使用相同的字体系列名称，而不是为每种字体定义单独的字体系列值，并定义匹配的样式，如下所示：

`@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不同的，网址也不同：Ubuntu- R-webfont vs Ubuntu- I-webfont。

字体的斜体版本示例：

ctan.org：这是如何为相同字体的不同样式/粗细提供不同文件的示例。粗体或斜体都不是当场计算的，它们是从它们的特定文件中检索的。