opentype_带有OpenType的优雅表数据

opentype

By default, information is jammed into the cells of HTML tables like a rebellious prisoner.  OpenType fonts and CSS3 can be used to make tabular data much more legible and typographically attractive through the use of tabular numerals.

默认情况下，信息像反叛的囚徒一样被卡在HTML 表格的单元格中。 通过使用表格数字，可以使用OpenType字体和CSS3使表格数据更清晰易读，并且在版式上更具吸引力 。

The table above has the following markup (in minified HTML5, to save space):

上表具有以下标记(以HTML5精简版，以节省空间)：

<table>
	<caption>2007 Greenhouse gas contributions, per country (megatonnes)</caption>
	<thead>
		<tr>
			<td>&nbsp;
			<th scope="col">USA
			<th scope="col">China
			<th scope="col">India
			<th scope="col">Canada
			<th scope="col">Brazil
	</thead>
	<tbody>
		<tr>
			<th scope="row">CO<sub>2</sub>
			<td>29,529.1
			<td>6,702.6
			<td>1410.4
			<td>583.9
			<td>373.7
		<tr>
			<th scope="row">Methane 
			<td>521
			<td>853.3
			<td>547.7
			<td>102
			<td>389.1
	</tbody>
</table>

Note that I’m using table header cells in the traditional top row position and as the leading cells for each row of data; I’m distinguishing their purpose and orientation through the scope attribute.

请注意，我在传统的第一行位置使用表格标题单元格，并将其作为每行数据的前导单元格； 我通过scope属性来区分它们的目的和方向。

比例与表格数字 (Proportional vs. Tabular Numerals)

Proportional fonts out of vertical alignment

比例字体不垂直对齐

In many fonts, numbers are presented proportionally – that is, each number takes up a slightly different amount of horizontal space. This feature makes numbers look presentable when they are placed inline with text, but throws them out of alignment when stacked one on top of the other, like so:

在许多字体中，数字按比例显示-也就是说，每个数字占用的水平空间略有不同。 此功能使数字与文本内联放置时看起来很可呈现，但是当一个堆叠在另一个之上时会使它们不对齐，如下所示：

Using a correctly embedded OpenType font on your web page means you can switch between the two number forms in CSS to increase legibility depending on the context of data:

在网页上使用正确嵌入的OpenType字体意味着您可以在CSS的两种数字形式之间切换，以根据数据的上下文增加可读性：

font-feature-settings: 'pnum'; /* proportional numerals */
font-feature-settings: 'tnum'; /* tabular numerals */

(Of course, each of these will need vendor prefixes for the CSS to work in the browsers that currently support these OpenType features: Firefox 3.6+. IE10, and Chrome 20.)

(当然，每个组件都需要CSS的 供应商前缀 ，才能在当前支持以下OpenType功能的浏览器中运行：Firefox 3.6 +，IE10和Chrome20。)

In other fonts, such as Calluna by Jos Buivenga, “Old Style” numerals – that is, digits that descend below the baseline, or appear raised above it, as in the 7 and 9 in the illustration above – are presented by default. “Lining” numbers are numeral forms that all rest on the same baseline. Again, you can use CSS to switch between the two:

在其他字体中，例如Jos Buivenga的Calluna ，默认显示“旧样式”数字-即下降到基线以下或出现在基线之上的数字，如上图的7和9所示。 “衬里”数字是全部位于同一基线上的数字形式。 同样，您可以使用CSS在两者之间进行切换：

font-feature-settings: 'pnum'; /* proportional numerals */
font-feature-settings: 'tnum'; /* tabular numerals */

汇集全部 (Bringing It All Together)

The entire CSS for the table above, using true small caps for the caption and tabular numerals for the table cells:

上表的整个CSS，对标题使用真正的小写字母 ，对表格单元格使用表格数字：

@font-face {
	font-family: Calluna;
	src: url('CallunaSansRegular.otf'),
	url('calluna.woff') format('woff');
}
table {
	font-size: 1.6rem;
	border-collapse: collapse;
}
table {
	font-family: Calluna, Arial, sans-serif;
}
table td {
	text-align: right;
	padding: .5rem;
	width: 5rem;
}
table thead th {
	border-bottom: 1px solid #777;
	font-weight: 400;
}
table tbody th {
	font-weight: 400;
	text-align: right;
	padding-right: 1rem;
}
table caption {
	font-feature-settings:"smcp";
}
table tbody td {
	font-feature-settings: "tnum";
}

翻译自: https://thenewcode.com/575/Elegant-Table-Data-With-OpenType

opentype