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

Posted 2023-03-15

【中文标题】字体样式：CSS 中的斜体与斜体

【英文标题】：font-style: italic vs oblique in CSS

【发布时间】：2010-12-13 10:19:50

【问题描述】：

这两者有什么区别：

font-style:italic
font-style:oblique

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

我错过了什么？

【问题讨论】：

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

迟来的后续问题（或者这应该进入用户体验？）：具体选择倾斜变体的实际用例是什么？斜体变体不是“总是”更可取吗？

@KlaymenDK：诚然，这是一个狭窄的用例，但我可以设想在像素化输出上的某些小字体大小中更喜欢倾斜字体以提高可读性：示例：在小字体上使用 6pt 到 8pt 字体外形尺寸屏幕；与简单的“斜体”相比，某些斜体形式的笔画更细，装饰物更多，可能会降低易读性。

【参考方案1】：

斜体字（或倾斜、倾斜）是一种稍微向右倾斜的字形，使用方式与斜体字相同。然而，与斜体不同的是，它不使用不同的字形形状；它使用与罗马字体相同的字形，除了失真。

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

【参考方案2】：

根据mozilla developer CSS tutorial：

italic：将文本设置为使用斜体版本（如果可用）；如果不可用，它将用斜体代替斜体。 oblique：将文本设置为使用斜体字体的模拟版本，通过倾斜正常版本创建。

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

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

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

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

字体文件的绝对 URL: (code sn-p 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');
 `

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

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

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

`@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-I-网页字体。

字体的斜体版本示例：

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

【讨论】：

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

【参考方案3】：

与 italic 和 oblique 一样，在比较 italic 和 faux italic 时可以看到相同的差异。

您将看到 faux-italics，其中 正常 字体与 font-style: italic; 倾斜，而真正的斜体字体被设计为倾斜。

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

See Example

【讨论】：

你的意思是斜体等于假斜体吗？

是的，如果既没有倾斜字体也没有斜体字体可用，结果将显示相同（至少在本示例中为 chrome）next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview

在没有视觉辅助的情况下无法回答这个问题，谢谢

【参考方案4】：

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

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

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

【讨论】：

请注意，几乎没有任何字体家族同时指定斜体和斜体面，如果指定的面不适用于该字体，大多数渲染引擎将提供另一个面。

class="comcopy">跨度>

此答案未解决功能差异、互斥性或语义差异。

以西里尔字体为例，斜体字符通常会非常不同，更像是草书形式，斜体形式只是斜体。

如果我说“斜体”但只有“倾斜”版本的字体可用，渲染引擎应该做什么？反之亦然？

@SingleNegationElimination 您的评论应该是答案，因为它特别解决了 CSS 的真正技术问题。此处选择的“答案”更多是关于排版。

【参考方案5】：

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

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