diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less index 5f91ce48ed..88adf17470 100644 --- a/components/date-picker/style/Picker.less +++ b/components/date-picker/style/Picker.less @@ -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; diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 13891fdfb6..796af3ecb5 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -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; diff --git a/components/style/core/base.less b/components/style/core/base.less index a2e3d6fd8d..56a568450a 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -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 diff --git a/components/style/mixins/reset.less b/components/style/mixins/reset.less index 0ddb408e9d..8ce32e3948 100644 --- a/components/style/mixins/reset.less +++ b/components/style/mixins/reset.less @@ -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; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index e9c5f317c1..6f183d032a 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -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%); diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index bbb26dfa93..68084bd45d 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -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; diff --git a/docs/spec/font.en-US.md b/docs/spec/font.en-US.md index dda812f39d..95879e05da 100644 --- a/docs/spec/font.en-US.md +++ b/docs/spec/font.en-US.md @@ -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 diff --git a/site/theme/static/common.less b/site/theme/static/common.less index 3f12af32e3..3415865338 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -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; diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less index aa872c117c..2b33f92686 100644 --- a/site/theme/static/footer.less +++ b/site/theme/static/footer.less @@ -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; diff --git a/site/theme/static/header.less b/site/theme/static/header.less index 174771cc99..f1edba756e 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -93,6 +93,7 @@ float: right; font-size: 14px; font-family: Lato, @font-family; + font-variant: tabular-nums; &.ant-menu-horizontal { border-bottom: none; diff --git a/site/theme/static/home.less b/site/theme/static/home.less index f93f5a03d4..7dacb2eb78 100644 --- a/site/theme/static/home.less +++ b/site/theme/static/home.less @@ -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 { diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index f985ad4361..236d2a5f9f 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -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;