kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 22:42:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize fonts rendering on windows (#385)

Browse Source 
* feat(styles): set Inter to highest font

* docs(fonts): add guide for fonts rendering on windows

* test: udpate snapshots
This commit is contained in:
witt
2020-09-24 13:57:35 +08:00
committed by unix
parent 8790eb8673
commit de1bc09ce7
11 changed files with 93 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/css-baseline/__tests__/__snapshots__/baseline.test.tsx.snap
View File

@@ -29,7 +29,7 @@ initialize {
min-height: 100%;
position: relative;
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
#__next {
@@ -49,7 +49,7 @@ initialize {
font-weight: 400;
color: inherit;
letter-spacing: -0.005625rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
p {
@@ -363,7 +363,7 @@ initialize {
min-height: 100%;
position: relative;
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
#__next {
@@ -383,7 +383,7 @@ initialize {
font-weight: 400;
color: inherit;
letter-spacing: -0.005625rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
p {

14
components/keyboard/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -9,7 +9,7 @@ exports[`Keyboard should render correctly 1`] = `
display: inline-block;
color: #666;
background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 0 4pt;
@@ -42,7 +42,7 @@ exports[`Keyboard should work with modifiers 1`] = `
display: inline-block;
color: #666;
background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 0 4pt;
@@ -71,7 +71,7 @@ exports[`Keyboard should work with modifiers 1`] = `
display: inline-block;
color: #666;
background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 0 4pt;
@@ -100,7 +100,7 @@ exports[`Keyboard should work with modifiers 1`] = `
display: inline-block;
color: #666;
background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 0 4pt;
@@ -129,7 +129,7 @@ exports[`Keyboard should work with modifiers 1`] = `
display: inline-block;
color: #666;
background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 0 4pt;
@@ -185,7 +185,7 @@ initialize {
display: inline-block;
color: #666;
background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 0 0;
@@ -240,7 +240,7 @@ initialize {
display: inline-block;
color: #666;
background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 0 0;

2
components/styles/themes/shared.ts
View File

@@ -6,7 +6,7 @@ import {
export const defaultFont: GeistUIThemesFont = {
sans:
'-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
mono:
'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
}

8
components/textarea/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -30,7 +30,7 @@ exports[`Textarea should render correctly 1`] = `
background-color: transparent;
box-shadow: none;
display: block;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-size: 0.875rem;
width: 100%;
height: 100%;
@@ -84,7 +84,7 @@ exports[`Textarea should work with different styles 1`] = `
background-color: transparent;
box-shadow: none;
display: block;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-size: 0.875rem;
width: 100%;
height: 100%;
@@ -134,7 +134,7 @@ exports[`Textarea should work with different styles 1`] = `
background-color: transparent;
box-shadow: none;
display: block;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-size: 0.875rem;
width: 100%;
height: 100%;
@@ -184,7 +184,7 @@ exports[`Textarea should work with different styles 1`] = `
background-color: transparent;
box-shadow: none;
display: block;
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
font-size: 0.875rem;
width: 100%;
height: 100%;

1
package.json
View File

@@ -76,6 +76,7 @@
"eslint-plugin-react": "^7.19.0",
"extract-mdx-metadata": "^1.0.0",
"fs-extra": "^8.1.0",
"inter-ui": "^3.15.0",
"jest": "^25.3.0",
"next": "^9.5.3",
"prettier": "^2.0.5",

1
pages/_app.tsx
View File

@@ -7,6 +7,7 @@ import Menu from 'lib/components/menu'
import ConfigContext from 'lib/config-provider'
import useDomClean from 'lib/use-dom-clean'
import { DeepPartial } from 'components/utils/types'
import 'inter-ui/inter.css'
const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
const theme = useTheme()

35
pages/en-us/guide/installation.mdx
View File

@@ -1,5 +1,5 @@
import Layout from 'lib/components/layout'
import { Note, Link, Code, Spacer, Tabs, Dot, Snippet, Grid } from 'components'
import { Note, Link, Code, Spacer, Tabs, Dot, Snippet, Grid, Text } from 'components'
export const meta = {
title: 'installation',
@@ -62,6 +62,39 @@ const MyComponent = () => <Button>Click Me</Button>
<Spacer y={1.5} />
<Text h3>
Font rendering on Windows{' '}
<Text span type="secondary" size=".75em" style={{ textTransform: 'uppercase' }}>
[Optional]
</Text>
</Text>
We know that some fonts do not render well on the _Windows_ side,
or do you think font rendering is not good enough for some character sets (like Chinese rendering),
In this case, you can introduce additional font packages to optimize the rendering:
> You don't need to modify any CSS files or declare fonts.
1. Install `inter-ui`:
<Snippet width="400px">yarn add inter-ui</Snippet>
<Spacer y={1.5} />
2. Add `Inter Font` to your project:
<Grid.Container>
<Grid xs={24} sm={16}>
```jsx
import 'inter-ui/inter.css'
```
</Grid>
</Grid.Container>
<Spacer y={1.5} />
### Single component
Geist UI supports importing single, specific components when you need them. This is referred to as `tree-shaking`.

15
pages/en-us/guide/server-render.mdx
View File

@@ -1,5 +1,5 @@
import Layout from 'lib/components/layout'
import { Code, Link, Text, Spacer, Note } from 'components'
import { Code, Link, Spacer, Note } from 'components'
export const meta = {
title: 'Server Render',
@@ -27,19 +27,6 @@ If you are concerned about losing the advantages of a Single Page Application by
Please read <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
the post from the Next.js team</Link> to learn more.
<Text>
In addition, for <Text b>server-side render</Text> and web applications, we strongly recommend
that you read this famous post{' '}
<Link
color
href="https://rauchg.com/2014/7-principles-of-rich-web-applications"
rel="nofollow"
target="_blank">
7-principles-of-rich-web-applications
</Link>{' '}
from <Text em>Guillermo Rauch</Text>.
</Text>
<Spacer y={2.5} />
### Next.js

35
pages/zh-cn/guide/installation.mdx
View File

@@ -1,5 +1,5 @@
import Layout from 'lib/components/layout'
import { Note, Link, Code, Spacer, Grid, Dot, Tabs, Snippet } from 'components'
import { Note, Link, Code, Spacer, Grid, Dot, Tabs, Snippet, Text } from 'components'
export const meta = {
title: '安装',
@@ -63,6 +63,39 @@ const MyComponent = () => <Button>按钮</Button>
<Spacer y={1.5} />
<Text h3>
在 Windows 上渲染字体{' '}
<Text span type="secondary" size=".75em" style={{ textTransform: 'uppercase' }}>
[可选的]
</Text>
</Text>
我们知道 Web 应用中一些字体在 _Windows_ 平台上无法得到最好的渲染效果，
或是你认为一些字符集没有得到最好的渲染 (如中文字符)，
在这类场景下，你可以额外引入字体库来优化渲染效果：
> 你不需要修改任何 CSS 文件或是声明字体。
1. 安装 `inter-ui`:
<Snippet width="400px">yarn add inter-ui</Snippet>
<Spacer y={1.5} />
2. 添加 `Inter Font` 到你的项目中:
<Grid.Container>
<Grid xs={24} sm={16}>
```jsx
import 'inter-ui/inter.css'
```
</Grid>
</Grid.Container>
<Spacer y={1.5} />
### 单个组件
`@geist-ui/react` 支持仅引入你需要的单个组件，例如：

14
pages/zh-cn/guide/server-render.mdx
View File

@@ -1,5 +1,5 @@
import Layout from 'lib/components/layout'
import { Code, Link, Text, Spacer, Note } from 'components'
import { Code, Link, Spacer, Note } from 'components'
export const meta = {
title: '服务端渲染',
@@ -27,18 +27,6 @@ export const meta = {
阅读 <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
这篇来自 Next.js 团队的文章</Link> 了解更多细节。
<Text>
除此之外，关于 <Text b>服务端渲染</Text> 和 Web 应用的细节考量， 我们强烈推荐你阅读这篇来自{' '}
<Text em>Guillermo Rauch</Text> 的著名博文：
<Link
color
href="https://rauchg.com/2014/7-principles-of-rich-web-applications"
rel="nofollow"
target="_blank">
构建 Web 应用的 7 原则
</Link>。
</Text>
<Spacer y={2.5} />
### 使用 Next.js

5
yarn.lock
View File

@@ -5018,6 +5018,11 @@ inquirer@^7.0.0:
strip-ansi "^6.0.0"
through "^2.3.6"
inter-ui@^3.15.0:
version "3.15.0"
resolved "https://registry.yarnpkg.com/inter-ui/-/inter-ui-3.15.0.tgz#05f9a13e59c7c513cedc907d244809231a79f889"
integrity sha512-6v0WK8FHkVYbNQZ7L9O5tP8280pgTBR9ydxqYwssMuUH6SZO70ZFK/NQ1Ob8nNmOOzpUJAzT0WE73ty96z1tAQ==
internal-slot@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"