opentype_使用OpenType在网页上生成明显的零-CSDN博客

opentype

Open Type allows for many subtle but important improvements in how text is rendered in modern browsers. I’ve discussed some of these in the past – discretionary ligatures and true small caps, automatic fractions and more – but perhaps the most practical is the ability to easily distinguish a capital O from the numeral 0 in a font. This legibility feature is vital for any occasion when mixed numerals and letters might cause confusion on web pages:

开放式允许对现代浏览器中的文本呈现方式进行许多细微但重要的改进。过去，我已经讨论了其中的一些内容- 任意连字和真正的小写字母，自动小数等，但是，最实用的功能是能够轻松区分大写O和字体中的数字0。此易读性功能在数字和字母混合使用可能导致网页混乱的任何情况下都是至关重要的：

Some fonts (such as Inconsolata, the font I will be using to display code in the next version of this blog) place a diagonal slash through zeros by default, but a surprising number of typefaces popular with coders do not feature clear distinction between the characters. You should determine if any font you decide to use on a site has a slashed zero feature; if it does, you can easily turn the feature on and off with CSS:

某些字体(例如Inconsolata ，我将在本博客的下一版本中用于显示代码的字体)默认情况下会在对角线斜杠前加零，但令人惊讶的是，许多受编码人员欢迎的字体并未明确区分字符。您应该确定您决定在网站上使用的任何字体是否具有斜杠零功能。如果是这样，您可以使用CSS轻松打开和关闭该功能：

p.calluna {
	font-family: Calluna Sans, sans-serif;
	font-size: 2rem;
}
/* normal style */
p.slashed-zero{
	-webkit-font-feature-settings: "zero";
	-moz-font-feature-settings: "zero=1";
	-moz-font-feature-settings: "zero";
	-ms-font-feature-settings: "zero";
	-o-font-feature-settings: "zero";
	font-feature-settings: "zero";
	font-variant: slashed-zero;
	font-weight: normal;
}
/* code to generate distinct zeros */

Calluna Sans Regular by Jos Buivenga, embedded:

Jos Buivenga编写的Calluna Sans Regular ，嵌入：

<p class="calluna slashed-zero">Herodotus and the 10,000 Immortals</p>

Result:

结果：

Herodotus and the 10,000 Persian Immortals

希罗多德与10,000名波斯神仙

Text displayed under normal conditions:

在正常情况下显示的文本：

<p class=calluna>Herodotus and the 10,000 Immortals

Herodotus and the 10,000 Persian Immortals

希罗多德与10,000名波斯神仙

Note that not every font features literal “slashed zeros“: Calluna Sans uses dotted zeros to distinguish the numeral from capital O’s.

请注意，并非每种字体都具有文字“斜杠零”：Calluna Sans使用点分零来区分数字和大写O。

I would suggest that in most cases you would want to turn on slashed zeros for a font only under certain circumstances. A good starting selector set might be:

我建议在大多数情况下，仅在某些情况下，您才希望为字体打开斜杠零。一个好的起始选择器集可能是：

code, kbd, td {
	-webkit-font-feature-settings: "zero";
	-moz-font-feature-settings: "zero=1";
	-moz-font-feature-settings: "zero";
	-ms-font-feature-settings: "zero";
	-o-font-feature-settings: "zero";
	font-feature-settings: "zero";
	font-variant: slashed-zero;
	font-weight: normal;
}

Something to keep in mind is the fact that OpenType support is somewhat inconsistent across browsers and platforms: you’ll see the correct typographic support on nearly all versions of Firefox and Chrome on Mac currently in use, for example, but only recent versions of those same browsers for Windows support the feature. Neither will you see support on iDevices. This is expected to improve in the very near future: for now, consider such typographical flourishes a “nice to have” feature, rather than something that will display completely consistently on every browser.

需要牢记的一点是，OpenType支持在浏览器和平台之间有些不一致：例如，您会在当前使用的几乎所有版本的Firefox和Mac上的Firefox和Chrome上看到正确的排版支持，但是Windows的相同浏览器也支持该功能。您也不会在iDevices上看到支持。预计在不久的将来，这种情况会有所改善：就目前而言，将这种印刷风格视为一种“很不错”的功能，而不是在每个浏览器上都能完全一致显示的功能。