Use tabular-nums font variant instead of switching to Tahoma for figures #11567
Conversation
Using a completely different font for figures leads to inconsistencies: #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/).
|
Deploy preview for ant-design ready! Built with commit 7b8b41d |
| 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, |
There was a problem hiding this comment.
I added "Chinese Quote" and removed SimSun because that's what was actually used.
I didn't change the font.zh-CN.md file, but the PR is configure to "Allow edits from maintainers.". Feel free to edit the Chinese page and to tweak the line breaking if you want shorter lines in the docs.
There was a problem hiding this comment.
Hi @tibdex the adding of "Chinese Quote" replaced Segoe UI everywhere in IE11 :(
Had to fix it manually
(chrome looks ok)
There was a problem hiding this comment.
Hi @Gyokur0, as you can see in my comment above, I only added "Chinese Quote" in the docs to keep them in sync with the actual font stack used in Less files.
This is the font stack before my commit:
ant-design/components/style/themes/default.less
Lines 37 to 39 in 1d92430
Note the presence of "Chinese Quote".
And after:
ant-design/components/style/themes/default.less
Lines 37 to 39 in b6e9646
Still starts with "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI".
I don't see how what you described would have happened.
Besides, I just visited https://ant.design/components/table/, which ships with this commit, on IE 11 and it displays with Segoe UI as expected.
Codecov Report
@@ Coverage Diff @@
## feature-3.8.0 #11567 +/- ##
==============================================
Coverage 91.94% 91.94%
==============================================
Files 199 199
Lines 5089 5089
Branches 1426 1426
==============================================
Hits 4679 4679
Misses 406 406
Partials 4 4Continue to review full report at Codecov.
|
Using a completely different font for figures leads to inconsistencies: #9422.
Most modern font systems default to tabular figures.
One exception to this is Apple's San Francisco which defaults to proportional figures.
There is, however, an official and clean way to switch to tabular figures. It's the
font-variantCSS property that can be set totabular-nums.This commit removes the "Monospaced Number" font altogether and use
font-variant: tabular-numsinstead where it was used.It also moves closer to the sans-serif and monospace system font stacks used by GitHub.
Here is the before/after on Windows where Segoe UI is now used for figures too. The difference is subtle but you can see it. Especially for the figure 1.
Before
After