docs: font

Author: yuanzm

docs/.vitepress/config.mts

@@ -61,7 +61,6 @@ export default defineConfig({
     outline: {
       label: '页面导航'
     },
-    // https://vitepress.dev/reference/default-theme-config
     nav: [
       {
         text: "微信小游戏官方文档",
@@ -72,7 +71,11 @@ export default defineConfig({
     sidebar: [
       {
         text: "概览",
-        link: "/index"
+        link: "/index",
+        items: [
+          { text: '简介', link: '/index'},
+          { text: '常见问题', link: '/qa'}
+        ]
       },
 
       {
@@ -89,6 +92,7 @@ export default defineConfig({
         items: [
           { text: '模板引擎使用', link: '/tutorial/templateengine'},
           { text: 'cocos2.x版本适配', link: '/tutorial/cocos2.x'},
+          { text: '使用字体', link: '/tutorial/font'},
           { text: '加载中效果实现', link: '/tutorial/loading'},
           { text: '平台适配', link: '/tutorial/platform'},
           { text: '缓动系统', link: '/api/tween'},
@@ -98,8 +102,8 @@ export default defineConfig({
         text: '更多示例',
         link:'/demos/invite',
         items: [
+          { text: '好友排行榜', link: '/demos/rank'},
           { text: '邀请好友组件', link: '/demos/invite'},
-          { text: '好有排行榜', link: '/demos/rank'},
         ],
       },
       {

docs/components/element.md

@@ -89,6 +89,8 @@ listItem.forEach(item => {
 ### removeChild(ele: Element)
 移除给定的子节点
 
+### remove()
+将节点从当前节点树中删除
 
 # 事件
 通过 getElementsById 或者 getElementsByClassName 获取元素之后，可以的绑定事件，支持的事件有`touchstart`、`touchmove`、`touchend`、`touchcancel`、`click`、`scroll(只有scrollview支持）`示例如下：
@@ -100,4 +102,4 @@ list.forEach(item => {
     console.log(e, item);
   });
 });
-```
+```

docs/index.md

@@ -15,7 +15,7 @@ Layout 的目标在于用 Web 的开发方式来开发简单的 Canvas 应用。
 
 ## web端调试
 
-为了方便调试，可以基于 codepen [模板](https://codepen.io/pen?template=VwEeLKw) 构建demo，旧版本[Playground](https://wechat-miniprogram.github.io/minigame-canvas-engine/playground.html)已不再维护。
+为了方便调试，可以基于 codepen [模板](https://codepen.io/pen?template=VwEeLKw) 构建demo，更多效果可以查看[Layout demo 合集](https://codepen.io/collection/PYrdpO)，旧版本[Playground](https://wechat-miniprogram.github.io/minigame-canvas-engine/playground.html)已不再维护。
 
 ## 效果预览
 <img src="/imgs/screenshot.gif" width=300>

docs/overview/guide.md

@@ -15,7 +15,7 @@ npm install minigame-canvas-engine --save
 import Layout from "minigame-canvas-engine";
 ```
 
-2. 编写模板字符串：这里采用 XML 去描述界面，而且支持有限的标签。需要特别注意的是，模板字符串只能有一个根节点，第二个节点会被忽略。如果想让模板更加强大，可以借助第三方模板引擎如[dot.js](https://olado.github.io/doT/index.html)。
+2. 编写模板字符串：这里采用 XML 去描述界面，而且支持有限的标签。需要特别注意的是，模板字符串只能有一个根节点，第二个节点会被忽略。如果想让模板更加强大，可以借助第三方模板引擎如[dot.js](https://olado.github.io/doT/index.html)，关于模板引擎的使用请查看[模板引擎使用](../tutorial/templateengine)。
 这一步需要开发者掌握一定程度的 Web 前端开发知识，如果你只有游戏开发经验没有任何 Web 前端开发经验，建议花点时间阅读下面教程：
   - [CSS教程](https://www.runoob.com/css/css-tutorial.html)：能够了解 Web 端是如何组织页面样式的；
   - [Flex布局教程](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html): 这个非常重要，Layout 布局仅仅支持 Flex 布局，通读教程能够了解如何进行页面布局；

docs/qa.md

@@ -0,0 +1,16 @@
+# 常见问题
+**Q1. 为什么小游戏用了 Layout 之后感觉滚动不灵敏或者有点按钮的点击位置感觉偏了？**
+
+A1. 因为 Layout 仅仅负责开放数据域的渲染，它不知道自己最终有没有上屏或者被绘制到了屏幕的什么位置，因此要做好事件处理，最方便的就是通过[updateViewPort](../api/api.html#updateviewport)精准告诉 Layout，绝大部分反馈都是这里的值没有传对，请仔细阅读文档并校验参数是否符合预期。
+
+**Q2. Layout 支持 Unity 和 Cocos 等游戏引擎里面的九宫格图么？**
+
+A2. 不支持，Unity 和 Cocos 支持九宫格图的引擎都是在 IDE 里面可以很方面操作，而 Layout 只是个渲染引擎没有 IDE，因此要把九宫格操作用 CSS 的方式表达出来会非常麻烦而且不太好支持，权衡之下目前不考虑支持。
+
+**Q3. Layout 支持节点的显示和隐藏么？**
+
+A3. 不支持通过display none的方式设置隐藏，核心有两个原因，一是 Layout 用的布局引擎是纯 js 版本，已经很多年不更新了，如果要支持隐藏的属性比较麻烦，二是升级布局引擎的话，Layout 的体积会直线上升违背了设计初衷，因此暂不支持。但实际上可以通过 Element.remove 方法将组件从节点树中移除，也可以通过 Element.appendChild 将节点重新添加到节点树来实现显示和隐藏切换的效果，详情可以查看 [Element](components/element) 的文档。
+
+**Q4. Layout支持使用自定义字体么？**
+
+A4. 支持，详情可见[教程](tutorial/font)。

docs/tutorial/font.md

@@ -0,0 +1,38 @@
+# 字体设置
+
+Layout 支持 fontFamily 属性来设置文字使用的字体，如果不设置该字段，文字将默认使用当前渲染系统的默认字体，不同渲染环境的默认字体是不同的，比如同样是小游戏环境，可能不同 iOS 版本苹果内置的默认字体也有变化。
+
+## fontFamily 示例
+fontFamily 规则对齐 CSS 的font-family，详情可见[font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)，参考值如 'Georgia, serif'。
+
+特别重要的一点是，假设当前系统不存在该字体则设置无效，比如设置字体为苹果字体，在安卓机上大概率无效。
+
+<iframe height="449.31109619140625" style="width: 100%;" scrolling="no" title="Layout Font" src="https://codepen.io/yuanzm/embed/LYwejRZ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/yuanzm/pen/LYwejRZ">
+  Layout Font</a> by yuanzm (<a href="https://codepen.io/yuanzm">@yuanzm</a>)
+  on <a href="https://codepen.io">CodePen</a>.
+</iframe>
+
+## 小游戏开放数据域使用字体
+在小游戏开放数据域要使用系统字体同样是使用 fontFamily 来设置，但大多时候，游戏都会有自己的自定义字体，通过 [wx.loadFont](https://developers.weixin.qq.com/minigame/dev/api/render/font/wx.loadFont.html) 接口加载后使用，如果要在开放数据使用自定义字体，只需要把 wx.loadFont 得到的字体名传给开放数据域，开放数据域的 fontFamily 使用该字体名即可，核心代码如下：
+``` js
+// game.js
+const fontFamily = wx.loadFont('xxxxx'); // 替换成真实的字体地址
+let openDataContext = wx.getOpenDataContext();
+openDataContext.postMessage({
+  type: 'setFontFamily',
+  fontFamily,
+})
+
+// open-data/index.js
+wx.onMessage(data => {
+  console.log(data)
+  /* {
+    type: 'setFontFamily',
+    fontFaimly: 'customFamliy1' // 假设字体名称为 customFamliy1
+  } */
+  
+  // Layout 可以使用 customFamliy1 作为 fontFamily 属性
+});
+
+```