docs: add custom font guide

kikipoulet · Oct 5, 2024 · 28a94c9 · 28a94c9
1 parent c0f15ec
commit 28a94c9
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
+:::
diff --git a/docs/docs/zh/documentation/faq/custom-font.md 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 字体查看器` 等软件查看字体名称
+:::