mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Use tabular-nums font variant instead of switching to Tahoma for figures

Browse Source 
Using a completely different font for figures leads to inconsistencies: https://github.com/ant-design/ant-design/issues/9422.
Most modern font systems defaults to [tabular figures](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures).
One exception to this is Apple's San Francisco which defaults to [proportional figures](http://martiancraft.com/blog/2015/10/san-francisco-part-2/#special-features-numerals).
There is, however, an official and clean way to switch to tabular figures. It's the [`font-variant` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric) that can be set to `tabular-nums`.

This commit removes the "Monospaced Number" font altogether and use `font-variant: tabular-nums` instead where it was used.
It also moves closer to the sans-serif and monospace [system font stacks used by GitHub](http://markdotto.com/2018/02/07/github-system-fonts/).
This commit is contained in:
Thibault Derousseaux 2018-08-01 13:41:46 -04:00 committed by 偏右
parent aa2b1a4352
commit 43abea3212
12 changed files with 21 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/date-picker/style/Picker.less
View File

@ -2,7 +2,7 @@
.@{calendar-prefix-cls}-picker-container {
.reset-component;
font-family: @font-family-no-number;
font-family: @font-family;
position: absolute;
z-index: @zindex-picker;

2
components/steps/style/index.less
View File

@ -66,7 +66,7 @@
font-size: @font-size-lg;
margin-right: 8px;
transition: background-color .3s, border-color .3s;
font-family: @font-family-no-number;
font-family: @font-family;
> .@{steps-prefix-cls}-icon {
line-height: 1;

15
components/style/core/base.less
View File

@ -7,20 +7,6 @@
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// http://stackoverflow.com/a/13611748/3040605
@font-face {
font-family: "Monospaced Number";
src: local("Tahoma");
unicode-range: U+30-39;
}
@font-face {
font-family: "Monospaced Number";
font-weight: bold;
src: local("Tahoma-Bold");
unicode-range: U+30-39;
}
@font-face {
font-family: "Chinese Quote";
src: local("PingFang SC"), local("SimSun");
@ -79,6 +65,7 @@ body {
margin: 0; // 1
font-family: @font-family;
font-size: @font-size-base;
font-variant: tabular-nums;
line-height: @line-height-base;
color: @text-color;
background-color: @body-background; // 2

1
components/style/mixins/reset.less
View File

@ -3,6 +3,7 @@
.reset-component() {
font-family: @font-family;
font-size: @font-size-base;
font-variant: tabular-nums;
line-height: @line-height-base;
color: @text-color;
box-sizing: border-box;

6
components/style/themes/default.less
View File

@ -34,9 +34,9 @@
@body-background : #fff;
// Base background color for most components
@component-background : #fff;
@font-family-no-number : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family : "Monospaced Number", @font-family-no-number;
@code-family : Consolas, Menlo, Courier, monospace;
@font-family : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@code-family : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@heading-color : fade(#000, 85%);
@text-color : fade(#000, 65%);
@text-color-secondary : fade(#000, 45%);

2
components/time-picker/style/index.less
View File

@ -7,7 +7,7 @@
.@{timepicker-prefix-cls}-panel {
.reset-component;
font-family: @font-family-no-number;
font-family: @font-family;
z-index: @zindex-picker;
position: absolute;

11
docs/spec/font.en-US.md
View File

@ -22,16 +22,15 @@ While defining the font system for a visual system, we propose to start from the
In order to implement a good font system, the first thing is to choose an appropriate font family. Ant Design prefers the system default font family and then also provides a set of alternative font libraries to maintain readability for screens on different platforms and browsers and to make sure it's always user friendly, stable and professional to end user.
```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
SimSun, sans-serif;
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
```
> References：https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
> References：https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ and http://markdotto.com/2018/02/07/github-system-fonts/
In addition, in a lot of applications, numbers often need to be displayed vertically. We set the numeric font to `Tahoma` specifically to make it a monospaced font.
In addition, in a lot of applications, numbers often need to be displayed vertically. We set the CSS property `font-variant-numeric` to `tabular-nums;` to use [tabular figures](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures).
> References：http://stackoverflow.com/questions/13611420/set-a-font-specifically-for-all-numbers-on-the-page
> References：https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage#comment78509178_32660790
## Base Font Size

1
site/theme/static/common.less
View File

@ -5,6 +5,7 @@ body {
body {
font-family: @font-family;
font-variant: tabular-nums;
line-height: 1.5;
color: @site-text-color;
font-size: 14px;

1
site/theme/static/footer.less
View File

@ -51,6 +51,7 @@ footer {
overflow: hidden;
font-family: Avenir, @font-family;
font-size: 16px;
font-variant: tabular-nums;
a {
color: rgba(255, 255, 255, 0.65);
margin-left: 4px;

1
site/theme/static/header.less
View File

@ -93,6 +93,7 @@
float: right;
font-size: 14px;
font-family: Lato, @font-family;
font-variant: tabular-nums;
&.ant-menu-horizontal {
border-bottom: none;

3
site/theme/static/home.less
View File

@ -8,6 +8,7 @@
position: relative; // will-change: transform;
color: @home-text-color;
font-family: Avenir, @font-family;
font-variant: tabular-nums;
.page {
width: 100%;
max-width: 1200px;
@ -76,6 +77,7 @@
margin: 8px 0 28px;
letter-spacing: 0;
font-family: Avenir, @font-family;
font-variant: tabular-nums;
}
p {
font-size: 20px;
@ -111,6 +113,7 @@
text-decoration: none;
border: 1px solid #2f54eb;
font-family: @font-family;
font-variant: tabular-nums;
}
.banner-btn.components {

2
site/theme/static/markdown.less
View File

@ -24,6 +24,7 @@
margin-top: 8px;
font-family: Lato, @font-family;
font-size: 30px;
font-variant: tabular-nums;
line-height: 38px;
.subtitle {
@ -43,6 +44,7 @@
.markdown h6 {
color: @site-heading-color;
font-family: Lato, @font-family;
font-variant: tabular-nums;
margin: 1.6em 0 0.6em;
font-weight: 500;
clear: both;