uniapp设置公共字体

要在Uniapp中设置公共字体，可以按照以下步骤进行：

1. 在项目的static文件夹中新建一个fonts文件夹，将需要使用的字体文件放入其中。

2. 在App.vue或者main.js中引入字体文件。例如：

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

3. 在需要使用该字体的组件中，设置字体样式。例如：

text {
  font-family: 'MyFont';
}

这样就可以在整个项目中使用该字体了。

相关问题

uniapp 好看的字体

uniapp中可以使用自定义字体来实现页面的美化效果。你可以通过以下步骤来选择并使用uniapp中的好看字体：

1. 首先，确保你已经准备好了想要使用的字体文件。你可以在网上寻找免费的字体资源，比如Font Squirrel网站。

2. 在App.vue文件中引入字体文件。你可以在style标签中使用@import命令引入字体文件。例如，如果你的字体文件名为font.css，你可以使用以下代码引入：

   <style>
   /*每个页面公共css */
   @import './common/font.css';
   </style>

3. 在页面的样式文件中使用字体。你可以在样式文件中使用page选择器来指定页面中要应用字体的元素，并使用font-family属性来设置字体样式。例如，如果你的字体文件中定义了一个名为"my-font"的字体，你可以使用以下代码将其应用到页面中的元素：

   page {
     font-family: 'my-font';
   }

通过以上步骤，你就可以在uniapp中使用自定义的字体来美化页面了。记得根据你自己的字体文件路径和字体名称进行调整。

uniapp 公共css颜色

### UniApp 公共 CSS 颜色设置及使用方法

#### 在 `App.vue` 设置全局背景颜色
为了给整个应用设定统一的背景颜色，在根目录下的 `App.vue` 文件中的 `<style>` 块内加入如下代码可以实现这一目标。通过定义 `page` 选择器并指定其 `background-color` 属性来达到目的。

<style>
/* 每个页面公共 css */
page {
    background-color: #f5f5f5;
}
</style>

此段代码使得所有页面共享相同的浅灰色(`#f5f5f5`)作为默认背景[^1]。

#### 利用 SCSS 实现更灵活的颜色管理
对于希望进一步优化样式的开发者来说，采用预处理器如SCSS是一个不错的选择。创建一个基础样式文件比如 `base-style.scss` 并在其内部声明所需变量用于存储常用色彩值：

// common/style/base-style.scss
$primary-bg-color: black !default;

body, page {
    background-color: $primary-bg-color;
}

接着在项目的入口级样式表中导入上述自定义的基础样式文件:

/* uni.scss */
@import "@/common/style/base-style";

这样做不仅能够集中管理和维护颜色方案，还便于日后调整配色而无需逐一修改各个视图组件内的硬编码颜色值[^3]。

#### 统一引入多个全局样式资源
如果项目中有更多全局适用的CSS库或字体图标等静态资源，则可以在同一个地方一次性加载它们。确保按照特定顺序依次引入这些依赖项——特别是当某些样式规则可能相互覆盖时尤为重要。例如，先载入框架自带的主题样式 (`uni.css`) ，再添加第三方插件提供的额外样式 (像 `iconfont.css`) 和自己编写的通用样式 (`common.css`) :

<!-- app.vue -->
<style lang="scss">
@import url("@/common/uni.css");
@import url("@/common/iconfont.css");
@import url("@/common/common.css");
</style>

这种做法有助于保持一致性和减少重复工作量的同时也提高了开发效率[^4]。