From 28a94c9b41bfdf0106b058fb1be6f99d3c231ecf Mon Sep 17 00:00:00 2001
From: Mccree Lee <auroraziling@gmail.com>
Date: Sat, 5 Oct 2024 12:43:27 +0800
Subject: [PATCH] docs: add custom font guide

---
 docs/docs/.vitepress/config/en.mts            |  6 ++
 docs/docs/.vitepress/config/zh.mts            |  6 ++
 docs/docs/documentation/faq/custom-font.md    | 56 +++++++++++++++++++
 docs/docs/zh/documentation/faq/custom-font.md | 56 +++++++++++++++++++
 4 files changed, 124 insertions(+)
 create mode 100644 docs/docs/documentation/faq/custom-font.md
 create mode 100644 docs/docs/zh/documentation/faq/custom-font.md

diff --git a/docs/docs/.vitepress/config/en.mts b/docs/docs/.vitepress/config/en.mts
index d8e3fc117..904db0507 100644
--- a/docs/docs/.vitepress/config/en.mts
+++ b/docs/docs/.vitepress/config/en.mts
@@ -115,6 +115,12 @@ export const en = defineConfig({
           { text: 'Toast', link: '/documentation/hosts/toast' },
         ]
       },
+      {
+        text: 'FAQ',
+        items: [
+          { text: 'Custom Font', link: '/documentation/faq/custom-font' },
+        ]
+      },
       {
         text: 'Style',
         items: [
diff --git a/docs/docs/.vitepress/config/zh.mts b/docs/docs/.vitepress/config/zh.mts
index 0b4aa4a11..b5e7c63c9 100644
--- a/docs/docs/.vitepress/config/zh.mts
+++ b/docs/docs/.vitepress/config/zh.mts
@@ -115,6 +115,12 @@ export const zh = defineConfig({
           { text: 'Toast', link: '/zh/documentation/hosts/toast' },
         ]
       },
+      {
+        text: 'FAQ',
+        items: [
+          { text: '自定义字体', link: '/zh/documentation/faq/custom-font' },
+        ]
+      },
       {
         text: '样式',
         items: [
diff --git a/docs/docs/documentation/faq/custom-font.md b/docs/docs/documentation/faq/custom-font.md
new file mode 100644
index 000000000..7b8f650fd
--- /dev/null
+++ b/docs/docs/documentation/faq/custom-font.md
@@ -0,0 +1,56 @@
+# How to use Custom Font
+
+Here is the `App.axaml` after creating the SukiUI project:
+
+```xml
+<Application xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="SukiTest.App"
+             xmlns:local="using:SukiTest"
+             xmlns:sukiUi="clr-namespace:SukiUI;assembly=SukiUI"
+             RequestedThemeVariant="Default">
+             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
+
+    <Application.DataTemplates>
+        <local:ViewLocator/>
+    </Application.DataTemplates>
+  
+    <Application.Styles>
+        <sukiUi:SukiTheme ThemeColor="Blue" />
+    </Application.Styles>
+</Application>
+```
+
+Assuming that there exists a font file `Assets/MiSans-Bold.ttf` and set the build action of that to `AvaloniaResource`
+
+Then replace the `DefaultFontFamily` with your font:
+
+```xml
+<Application
+    RequestedThemeVariant="Default"
+    x:Class="SukiTest.App"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:local="using:SukiTest"
+    xmlns:sukiUi="clr-namespace:SukiUI;assembly=SukiUI"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options.  -->
+
+    <Application.Resources> // [!code highlight]
+        <ResourceDictionary> // [!code highlight]
+            <FontFamily x:Key="DefaultFontFamily">avares://SukiTest/Assets/MiSans-Bold.ttf#MiSans</FontFamily> // [!code highlight]
+        </ResourceDictionary> // [!code highlight]
+    </Application.Resources> // [!code highlight]
+
+    <Application.DataTemplates>
+        <local:ViewLocator />
+    </Application.DataTemplates>
+
+    <Application.Styles>
+        <sukiUi:SukiTheme ThemeColor="Blue" />
+    </Application.Styles>
+</Application>
+```
+
+::: tip
+`#MiSans` is not the same in other font files, you can use a program like `Windows Font Viewer` to see the font name
+:::
\ No newline at end of file
diff --git a/docs/docs/zh/documentation/faq/custom-font.md b/docs/docs/zh/documentation/faq/custom-font.md
new file mode 100644
index 000000000..c97f9d36a
--- /dev/null
+++ b/docs/docs/zh/documentation/faq/custom-font.md
@@ -0,0 +1,56 @@
+# 如何使用自定义字体
+
+以下是创建一个新的 SukiUI 项目后的 `App.axaml` 文件：
+
+```xml
+<Application xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="SukiTest.App"
+             xmlns:local="using:SukiTest"
+             xmlns:sukiUi="clr-namespace:SukiUI;assembly=SukiUI"
+             RequestedThemeVariant="Default">
+             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
+
+    <Application.DataTemplates>
+        <local:ViewLocator/>
+    </Application.DataTemplates>
+  
+    <Application.Styles>
+        <sukiUi:SukiTheme ThemeColor="Blue" />
+    </Application.Styles>
+</Application>
+```
+
+假设存在一个字体文件 `Assets/MiSans-Bold.ttf`，并将其构建行为设置为 `AvaloniaResource`
+
+然后替换 `DefaultFontFamily` 为你的字体：
+
+```xml
+<Application
+    RequestedThemeVariant="Default"
+    x:Class="SukiTest.App"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:local="using:SukiTest"
+    xmlns:sukiUi="clr-namespace:SukiUI;assembly=SukiUI"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options.  -->
+
+    <Application.Resources> // [!code highlight]
+        <ResourceDictionary> // [!code highlight]
+            <FontFamily x:Key="DefaultFontFamily">avares://SukiTest/Assets/MiSans-Bold.ttf#MiSans</FontFamily> // [!code highlight]
+        </ResourceDictionary> // [!code highlight]
+    </Application.Resources> // [!code highlight]
+
+    <Application.DataTemplates>
+        <local:ViewLocator />
+    </Application.DataTemplates>
+
+    <Application.Styles>
+        <sukiUi:SukiTheme ThemeColor="Blue" />
+    </Application.Styles>
+</Application>
+```
+
+::: tip
+`#MiSans` 在其他字体中的名称都不一样，你可以使用类似 `Windows 字体查看器` 等软件查看字体名称
+:::
\ No newline at end of file