Question

这两者之间有什么区别：

font-style:italic
font-style:oblique

我尝试使用W3Schools editor但无法区分。

我错过了什么？

Answer 1

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

某些类型的代工厂有任意创建的斜角，这些斜角不一定得到设计师自己的批准......有些字体不是斜体或倾斜......但无论如何人们都做了。正如您可能知道的那样，某些操作系统在点击“斜体”图标后会扭曲字体并在运行中创建倾斜。不是一个愉快的景象。

最好只在确定字体是用一个字体设计时才指定斜体。

Answer 2

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

大多数字体都有斜体或斜版;我从来没有见过一个兼具两者的人。（如果你有一个斜体版本，为什么还要使用斜版？）

Answer 3

倾斜类型（或倾斜，倾斜）是一种略微向右倾斜的形式，以与斜体相同的方式使用。但是，与斜体类型不同，它不使用不同的字形;它使用与罗马字体相同的字形，除了失真。

继续阅读： css font style oblique vs italic

Answer 4

与斜体和倾斜一样，将斜体与仿斜体进行比较时，可以看到相同的差异。< / p>

如果普通字体偏向font-style: italic;，您将会看到 faux-italics ，而真正的斜体字体则设计为倾斜。

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

See Example

Answer 5

根据mozilla developer CSS tutorial：

斜体：将文本设置为使用字体的斜体版本（如果可用）；如果不可用，它将使用斜线模拟斜体。

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-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是不同的，并且URL也不同：Ubuntu- R -webfont与Ubuntu- I < / strong> -webfont。

字体的斜体示例：

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

font-style：CSS中的斜体与斜体

5 个答案: