font-style: CSS中的斜体vs斜体

这两者之间的区别是什么?

font-style:italic
font-style:oblique

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

我错过了什么?

111371 次浏览
小开

一般来说，斜体是一种特殊的字体版本，而斜体版本只是普通的倾斜版本。所以这两种字体都是倾斜的，与常规字体有关，但斜体有专门为它设计的特殊字体。

大多数字体都有斜体或斜体版本;我从没见过两者兼备的。(如果你有斜体版本，为什么还要用斜体版本呢?)

小开
最佳答案

在最纯粹的(字体设计者)意义上，斜体是一种倾斜了一定程度(通常是8-12度)的罗马字体。斜体是由字体设计人员使用不同的特定字符(特别是小写字母a)创建的，以创建更具书法风格的斜体版本。

一些类型铸造厂随意创建斜面，不一定是由设计师自己批准的…有些字体不应该是斜体或斜体。但人们还是这么做了。正如你所知道的，一些操作系统会在点击“斜体”图标时，倾斜字体并在运行中创建斜体。这不是令人愉快的景象。

最好只有在确定字体设计时才指定斜体。

小开

斜体字(或斜体字、斜体字)是一种稍微向右倾斜的字体，使用方式与斜体字相同。然而，与斜体类型不同，它不使用不同的字形;它使用与罗马字体相同的字形，只是变形了。

< >强进一步阅读: CSS字体样式斜体vs斜体 < / p >

小开

与斜体和斜一样，当比较斜体和人造斜体时，可以看到相同的差异。

你会在正常的字体被font-style: italic;倾斜的地方看到faux-italics，而真正的斜体字体被设计成倾斜的。

enter image description here

两个< em >对< / em >​s的底部清楚地显示了区别。

< a href = " http://plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?p=preview" rel="noreferrer">参见示例

小开

根据mozilla开发者CSS教程:

  • 斜体:将文本设置为如果可能，请使用斜体字体;如果不可用，它将用斜体代替模拟斜体。< br >
  • 斜体:将文本设置为使用斜体的模拟版本，斜体是通过倾斜正常版本创建的。

    • 从这里，我们推导出如果字体的斜体版本不可用， 斜体和斜的行为相同。由于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代码片段，这就是浏览器如何区分__ABC3和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 vs Ubuntu-我-webfont。

    斜体字体的例子:

    ctan.org:这是一个如何为相同字体的不同样式/权重提供不同文件的例子。粗体和斜体都不是当场计算的，而是从它们的特定文件中检索的。


    • 提交答案