54 lines
1.2 KiB
Markdown
54 lines
1.2 KiB
Markdown
|
# 字体
|
|||
|
|
|
|||
|
|
## 自定义字体
|
|||
|
|
|
|||
|
|
脚手架提供了两种自定义字体
|
|||
|
|
|
|||
|
|
- [HarmonyOS_Sans_Regular.woff2](https://developer.huawei.com/consumer/cn/design/resource-V1/)
|
|||
|
|
- [LXGWBright-Regular.woff2](https://github.com/lxgw/LxgwWenKai)
|
|||
|
|
|
|||
|
|
## 使用字体
|
|||
|
|
|
|||
|
|
您可以通过 tailwindcss 的类来调整局部字体，例如：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<div class="font-Harmony">
|
|||
|
|
这是 Harmony 字体
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="font-LXGW">
|
|||
|
|
这是落霞孤鹜字体
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
您可以在 `style.css` 中定义全局字体，例如：
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
@plugin "daisyui/theme" {
|
|||
|
|
name: "light";
|
|||
|
|
--color-primary: #5092d4;
|
|||
|
|
--color-secondary: #bfd7f1;
|
|||
|
|
--color-accent: #76b9ef;
|
|||
|
|
/* 自定义字体在 App.vue 中加载 */
|
|||
|
|
--font-sans: '"Harmony", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
如果您需要其他自定义字体，请在 `App.vue` 中定义 font-face，例如：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<style>
|
|||
|
|
@font-face {
|
|||
|
|
font-family: "LXGW";
|
|||
|
|
src: url("/fonts/LXGWBright-Regular.woff2") format("woff2");
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-display: swap;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 后续目标
|
|||
|
|
|
|||
|
|
后续我们将推出能够实时修改全局字体的组件
|