refactor: use font from v-fonts

demo/documentation/intro/start/enUS/index.md

@@ -13,13 +13,13 @@ Add the following lines in you entry point js file.
 import { createApp } from 'vue'
 import naive from 'naive-ui'
 
-// If you want to use the built-in fonts of UI. Add the 
-// following lines on demand.
-// Generic Fonts, choose one at most
-import 'naive-ui/fonts/Lato.css'
-import 'naive-ui/fonts/FiraSans.css'
+// naive ui works with `vfonts` https://github.com/07akioni/vfonts
+// you can use font from `vfonts` easily, for example:
+// Generic Font
+import 'vfonts/Lato.css'
 // Monospace Fonts
-import 'naive-ui/fonts/FiraCode.css'
+import 'vfonts/FiraCode.css'
+// then it works
 
 const app = createApp()
 app.use(naive)

demo/documentation/intro/start/zhCN/index.md

@@ -13,12 +13,13 @@ npm install --save-dev naive-ui
 import { createApp } from 'vue'
 import naive from 'naive-ui'
 
-// 如果需要使用 UI 内置的字体，可以按需添加下面的代码
-// 通用字体，多选一
-import 'naive-ui/fonts/Lato.css'
-import 'naive-ui/fonts/FiraSans.css'
-// 等宽字体
-import 'naive-ui/fonts/FiraCode.css'
+// naive ui 可以和 `vfonts` https://github.com/07akioni/vfonts 配合
+// 你可以简单的引入 `vfonts` 中的字体
+// 通用字体
+import 'vfonts/Lato.css'
+// 等款字体
+import 'vfonts/FiraCode.css'
+// 不用做其他的事情了
 
 const app = createApp()
 app.use(naive)

demo/font.js

@@ -1,2 +1,2 @@
-import '../src/fonts/OpenSans.css'
-import '../src/fonts/FiraCode.css'
+import 'vfonts/OpenSans.css'
+import 'vfonts/FiraCode.css'

demo/styles/demo.css

@@ -13,11 +13,11 @@ body {
 }
 
 .demo-card .demo-card__view pre {
-  font-family: "naive-ui-mono", monospace;
+  font-family: v-mono, monospace;
 }
 
 .demo-card .demo-card__view code {
-  font-family: "naive-ui-mono", monospace;
+  font-family: v-mono, monospace;
 }
 
 .demo-card code.n-text {
@@ -30,7 +30,7 @@ body {
 
 .api-table .n-table__td:nth-child(1) {
   font-size: 13px !important;
-  font-family: naive-ui-mono, monospace;
+  font-family: v-mono, monospace;
 }
 
 .api-table .n-text.n-text--code {

package.json

@@ -84,6 +84,7 @@
     "highlight.js": "^9.18.1",
     "lodash-es": "^4.17.15",
     "treemate": "^0.1.9",
+    "vfonts": "^0.0.1",
     "vicons": "0.0.1",
     "vooks": "0.0.1-alpha.3",
     "vue": "^3.0.2",

src/fonts/FiraCode.css

@@ -1,5 +0,0 @@
-@font-face {
-  font-family: "naive-ui-mono";
-  font-weight: 400;
-  src: url("./assets/FiraCode-Regular.woff2");
-}

src/fonts/FiraSans.css

@@ -1,11 +0,0 @@
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 400;
-  src: url("./assets/FiraSans-Regular.woff2");
-}
-
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 500;
-  src: url("./assets/FiraSans-Medium.woff2");
-}

src/fonts/IBMPlexMono.css

@@ -1,5 +0,0 @@
-@font-face {
-  font-family: "naive-ui-mono";
-  font-weight: 400;
-  src: url("./assets/IBMPlexMono-Regular.ttf");
-}

src/fonts/IBMPlexSans.css

@@ -1,11 +0,0 @@
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 400;
-  src: url("./assets/IBMPlexSans-Regular.ttf");
-}
-
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 500;
-  src: url("./assets/IBMPlexSans-Medium.ttf");
-}

src/fonts/Inter.css

@@ -1,11 +0,0 @@
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 400;
-  src: url("./assets/Inter-Regular.woff2");
-}
-
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 500;
-  src: url("./assets/Inter-Medium.woff2");
-}

src/fonts/Lato.css

@@ -1,11 +0,0 @@
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 400;
-  src: url("./assets/LatoLatin-Regular.woff2");
-}
-
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 500;
-  src: url("./assets/LatoLatin-Semibold.woff2");
-}

src/fonts/OpenSans.css

@@ -1,11 +0,0 @@
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 400;
-  src: url("./assets/OpenSans-Regular.ttf");
-}
-
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 500;
-  src: url("./assets/OpenSans-SemiBold.ttf");
-}

src/fonts/Roboto.css

@@ -1,11 +0,0 @@
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 400;
-  src: url("./assets/Roboto-Regular.ttf");
-}
-
-@font-face {
-  font-family: "naive-ui";
-  font-weight: 500;
-  src: url("./assets/Roboto-Medium.ttf");
-}

src/styles/base/_common.js

@@ -1,6 +1,6 @@
 export default {
-  fontFamily: 'naive-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  fontFamilyMono: 'naive-ui-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace',
+  fontFamily: 'v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  fontFamilyMono: 'v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace',
 
   fontWeightStrong: '500',
 

think.md

@@ -328,7 +328,7 @@ const naive = create({
 23. <del>Date 键盘操作 Time 键盘操作</del> 先把能做的做了
 24. <del>Time 格式化</del>
 25. <del>Date 格式化</del>
-26. <del>base cancel mark rename suffix</del>s
+26. <del>base cancel mark rename suffix</del>
 27. <del>base picker => base selection</del>
 28. <del>base lightbar => base tracking rect</del>
 29. <del>loader 区分 debug 和 非 debug</del>
@@ -398,22 +398,22 @@ const naive = create({
 93. steps 列表优化
 94. tabs 列表优化
 95. tree 列表优化
-96. cascader 列表优化
+96. <del>cascader 列表优化</del>
 97. 更多的 tabs 选择
-98. 下拉菜单应该给 icon 留空间
+98. <del>下拉菜单应该给 icon 留空间</del>
 99. <del>Form item feedback 好像有点问题，消失的时候，自定义时候</del>
 100. <del>Confim 重命名 Dialog</del> 算了不换了，牵扯的地方太多不好改了，confirm 也就凑活吧
 101. Dark Debug 3，Safari 你可太秀了......
-102. close-outline icon
-103. input + icon 主题切换 transition 有问题!!!
+102. <del>close-outline icon</del>
+103. <del>input + icon 主题切换 transition 有问题!!!</del>
 104. <del>auto-complete 自定义元素 demo 有问题</del> 有 pendingData 的时候 preventDefault
 105. <del>markdown 渲染缺少空格，修正了 n-select single filterable 时 placeholder 的样式问题</del> caused by vue compiler `preserveWhitespace: false`, change it to `whitespace: 'condense'`
 106. <del>drawer 加上滚动条，以及 overflow auto 的样式</del>
-107. 所有弹出的东西改成 body-style
-108. size 切换的时候... transfer 动画问题
+107. <del>所有弹出的东西改成 body-style</del>
+108. <del>size 切换的时候... transfer 动画问题</del>
 109. 利用了公用组件的组件样式没办法特殊调教，比如 select 组件自身是没有命名空间的，这个想要单独定制就比较麻烦。先不出来怎么解决
-110. treemate 重构 cascader，异步 api 需要更改
-
+110. <del>treemate 重构 cascader，异步 api 需要更改</del>
+111. 样式不能被 cloned，因为 peers 机制
 ```
 Done
 // modal transform scale

vue3.md

@@ -330,4 +330,7 @@ class =>
   <comp>
 </abstract>
 not working in production mode
-https://github.com/vuejs/vue-next/issues/2549
+https://github.com/vuejs/vue-next/issues/2549
+
+fonts are moved to `vfonts`
+lib/styles/index.css is removed