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

font-style:italic
font-style:oblique

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

我错过了什么?


当前回答

根据mozilla开发者CSS教程:

italic:设置文本使用字体的斜体版本(如果可用);如果不可用,它将用斜体代替模拟斜体。 斜体:将文本设置为使用斜体的模拟版本,斜体是通过倾斜正常版本创建的。

从这里,我们推断如果字体的斜体版本不可用,斜体和斜体的行为是相同的。由于W3Schools代码片段没有指定任何特定的字体族,所以我认为使用了默认字体;一种默认字体,可能没有斜体版本。

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

这意味着我们至少有两个相同字体的版本,一个是“常规”字体,一个是斜体字体。这些可以在<style>部分中使用@font-face规则指定。请简单读一下:开发者。Mozilla, w3schools, typanus.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:斜体

使用字体文件的相对路径:(代码片段来自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页面相同的文件夹中。再次注意,字体族是相同的,字体样式是不同的,url也是不同的:Ubuntu-R-webfont vs Ubuntu-I-webfont。

斜体字体的例子:

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

其他回答

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

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

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

进一步阅读: CSS字体样式斜体vs斜体

根据mozilla开发者CSS教程:

italic:设置文本使用字体的斜体版本(如果可用);如果不可用,它将用斜体代替模拟斜体。 斜体:将文本设置为使用斜体的模拟版本,斜体是通过倾斜正常版本创建的。

从这里,我们推断如果字体的斜体版本不可用,斜体和斜体的行为是相同的。由于W3Schools代码片段没有指定任何特定的字体族,所以我认为使用了默认字体;一种默认字体,可能没有斜体版本。

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

这意味着我们至少有两个相同字体的版本,一个是“常规”字体,一个是斜体字体。这些可以在<style>部分中使用@font-face规则指定。请简单读一下:开发者。Mozilla, w3schools, typanus.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:斜体

使用字体文件的相对路径:(代码片段来自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页面相同的文件夹中。再次注意,字体族是相同的,字体样式是不同的,url也是不同的:Ubuntu-R-webfont vs Ubuntu-I-webfont。

斜体字体的例子:

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

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

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

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

就像斜体和斜体一样,当比较斜体和假斜体时,同样的区别是显而易见的。

你会在正常字体被font-style扭曲的地方看到假斜体:italic;而真正的斜体字体是被设计成倾斜的。

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

看例子