带OpenType替换的自动分数

The ideal solution to creating fractions on webpages would be to have the typeface automatically produce the correct fraction from whatever numerator and denominator you used in the text. This ability to automatically substitute characters is a feature of some OpenType fonts.

在网页上创建分数的理想解决方案是使字体根据您在文本中使用的分子和分母自动生成正确的分数。 这种自动替换字符的功能是某些OpenType字体的功能。

While OpenType is supported in all modern browsers as a typeface, the advanced CSS3 properties used to get the most out of the format are limited to Firefox 4+, IE10 and Chrome 20+ at the moment; support for Safari is expected in the near future. Writing the CSS to control these features is made slightly more complex by the fact that Chrome’s OpenType will become confused if you immediately follow the fraction with another character; Firefox’s support went through a small syntax modification towards what is now the accepted standard.

尽管所有现代浏览器均支持OpenType作为字体，但目前，用于充分利用该格式的高级CSS3属性仅限于Firefox 4 +，IE10和Chrome 20+。 预计在不久的将来将支持Safari。 如果您立即在分数后面加上另一个字符，Chrome的OpenType就会变得混乱，因此编写CSS来控制这些功能会变得有些复杂。 Firefox的支持通过对现在公认的标准进行了小的语法修改。

First, we have to embed the font on our page. (For this article, I’m using the wonderful – and free! – MEgalopolisExtra, by the SMeltery font foundry).

首先，我们必须在页面上嵌入字体。 (在这篇文章中，我使用了精彩-免费- ！ MEgalopolisExtra ，由冶炼厂字体开发公司)。

Note that Firefox will preferentially use WOFF fonts over OTF in an @font-face declaration unless you’re careful about the order: the trick is to put the OTF font last, like so:

请注意，除非您注意顺序，否则Firefox会优先使用@font-face声明中的WOFF字体而不是OTF @font-face ：诀窍是将OTF字体放在最后 ，就像这样：

@font-face {
	font-family: 'Megalopolis';
	src: url('megalopolis.eot');
	src: url('megalopolis.eot?#iefix') format('embedded-opentype'),
		 url('megalopolis.woff') format('woff'),
		 url('megalopolis.ttf') format('truetype'),
		 url('megalopolis.svg#megalopolis') format('svg');
	src: url('megalopolis.otf');
}

Then, we’re going to apply Megalopolis to our paragraphs, and turn on arbitrary fractions at the same time:

然后，我们将Megalopolis应用于我们的段落，并同时启用任意分数：

p { 
	font-family: Megalopolis, serif; 
	-moz-font-feature-settings: "frac=1"; 
	-moz-font-feature-settings: "frac";
	-webkit-font-feature-settings: "frac"; 
	-ms-font-feature-settings: "frac";
	font-feature-settings: "frac";
	font-size: 2rem;
}

We can now put in any two numbers in our text separated by a divisor and they will automatically be turned into a fraction (the browser will recognize the correct divisor character or the standard forward slash)

现在，我们可以在文本中输入由除数分隔的任意两个数字，它们将自动变成小数(浏览器将识别出正确的除数字符或标准正斜杠)

This is a 1⁄2 inch drill bit

这是1⁄2英寸的钻头

Which, associated with the correct CSS, produces:

与正确CSS关联的代码会产生：

This is a 1⁄2 inch drill bit

这是1⁄2英寸的钻头

Magic!

魔法！

Long term, the CSS property and value will likely simplify to font-variant-numeric: diagonal-fractions but support for that does not yet exist in browsers.

从长远来看，CSS属性和值可能会简化为font-variant-numeric: diagonal-fractions但浏览器尚不支持该功能。

当前最佳实践 (Current Best Practices)

If you’re placing fractions on a page, my suggested workflow is:

如果您要在页面上放置分数，我建议的工作流程是：

• Use HTML entities if the fraction is common and you are not using an OpenType font.

  如果分数是通用的，并且您没有使用OpenType字体，请使用HTML实体 。

• If you are using an OpenType font or if the fraction is not common, linearize the enumerator and denominator. Remember to use the correct divisor symbol.

  如果您使用的是OpenType字体， 或者小数位数不常见，请线性化枚举数和分母。 切记使用正确的除数符号。

• Turn on fractional substitutions for paragraphs and other content using CSS3. Linearized fractions displayed in an OpenType font that supports glyph substitution will be converted automatically. Consider making the declaration part of your default CSS stylesheet; alternatively, create a class that may be applied to spans where the effect should be used.

  使用CSS3打开段落和其他内容的小数替换。 以支持字形替换的OpenType字体显示的线性化分数将自动转换。 考虑使声明成为默认CSS样式表的一部分 ； 或者，创建一个可应用于应使用效果的跨度的类。

There are many more powerful and fun features in OTF typefaces that I’ll explore in future articles.

我将在以后的文章中探讨OTF字体中还有许多更强大和有趣的功能。

翻译自: https://thenewcode.com/567/Automatic-Fractions-With-OpenType-Substitution