uniapp如何设置全局字体是思源黑体

admin2年前 (2023-06-20)uniapp913

在 UniApp 中设置全局字体为思源黑体,可以按照以下步骤进行:

1. 将思源黑体字体文件(.ttf 或 .otf 格式)添加到项目的静态资源目录中,例如 `/static/fonts/SourceHanSansCN-Regular.ttf`。

2. 在 `App.vue` 文件中的 `<style>` 标签中添加以下代码:

CSS
@font-face {
  font-family: 'SourceHanSansCN';
  src: url('~@/static/fonts/SourceHanSansCN-Regular.ttf') format('truetype');
}

body {
  font-family: 'SourceHanSansCN', sans-serif;
}

这段代码首先使用 `@font-face` 定义了一个名为 `SourceHanSansCN` 的字体,指定了字体文件的路径和格式。然后,通过将 `font-family` 设置为 `'SourceHanSansCN', sans-serif`,将全局字体应用于整个应用程序。

3. 确保在 `App.vue` 文件中的 `<template>` 标签中,使用了 `<view>` 或 `<text>` 标签来显示文本内容,以确保全局字体样式生效。

这样,整个 UniApp 应用程序中的文本内容都将使用思源黑体作为字体。请注意,这种设置方式是全局生效的,如果需要在某个页面或组件中使用其他字体,可以在局部样式中进行单独设置。


相关文章

uniapp的支付宝小程序报:在自定义组件 /pages/member/header/header中无 Component() 构造器调用,但 Page() 页面构造器被错误调用

uniapp的支付宝小程序报:在自定义组件 /pages/member/header/header中无 Component() 构造器调用,但 Page() 页面构造器被错误调用

uniapp生成的支付宝小程序报错:在自定义组件 /pages/member/header/header中无 Component() 构造器调用,但 Page() 页面构造器被错误调用,而同样的百度、...