开发无需引入,直接用的font-family
时间: 2024-11-15 13:29:59 浏览: 18
在开发微信小程序时,你可以直接在CSS样式表中使用`font-family`属性来指定字体。小程序支持预设的一些内置字体,比如`PingFang SC`, `Microsoft YaHei`等,这些字体不需要额外引入,可以直接在CSS中声明。如果你需要使用其他非预设的中文字体,可以采用如下方式:
1. **系统内置字体**:如需使用微信提供的默认字体,只需指定其名称即可,例如:
```css
.text-with-system-font {
font-family: PingFang SC, Helvetica, Arial, sans-serif;
}
```
2. **自定义字体**:对于自定义的中文字体,如果已经打包到小程序的`assets`目录下,可以这样使用:
```css
@font-face {
font-family: 'YourCustomFont';
src: url('./fonts/your-font.ttf') format('truetype');
}
.text-with-custom-font {
font-family: YourCustomFont, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
```
请确保字体文件格式是支持的(如`.ttf`或`.woff2`),并且文件名和路径要在实际开发环境中正确引用。
相关问题
uniapp 中 font-family可选基本字体有哪些
### UniApp 中支持的 `font-family` 基本字体列表
在 UniApp 开发环境中,所使用的 `font-family` 字体主要依赖于目标平台自带的默认字体以及开发者自行引入的自定义字体。对于基本字体的支持情况如下:
#### Android 平台
Android 设备通常预装了一系列标准字体,这些字体可以直接被应用调用而无需额外安装或配置:
- **sans-serif**: 无衬线字体,默认情况下指向Roboto。
- **serif**: 衬线字体。
- **monospace**: 等宽字体。
#### iOS 平台
iOS 提供了一套丰富的内置字体集合,常见的有:
- **Helvetica Neue**
- **Arial**
- **Courier New**
- **Georgia**
#### Web 浏览器端
当项目编译成H5网页时,则会遵循Web环境中的字体规则,即使用HTML文档所在操作系统提供的常用西文字体族名称(generic family name),如:
- **sans-serif**, **serif**, 和 **monospace**.
需要注意的是,在实际开发过程中如果指定的具体字体名不存在于用户的设备中,那么浏览器将会回退到系统的默认字体显示[^1]。
此外,考虑到跨平台的一致性和兼容性问题,建议优先选用广泛存在于各主流操作系统的通用字体系列;而对于特殊需求则可以通过上述提到的方法来加载外部字体文件并注册至项目内以便正常使用[^2]。
```css
/* 示例:定义全局字体 */
@font-face {
font-family: 'CustomFont';
src: url('@/fonts/custom-font.ttf');
}
body, view {
font-family: 'CustomFont', sans-serif; /* 设置备用字体 */
}
```
scss引入其他scss文件
### 如何在 SCSS 文件中 `@import` 引入其他 SCSS 文件
#### 方法概述
为了在 SCSS 文件中引入其他的 SCSS 文件,可以利用 `@import` 指令来实现这一目标。此指令不仅能够加载并合并多个样式表的内容至单个 CSS 输出文件之中,而且还能使被导入文件中的变量、混合宏等功能生效于当前文档内[^1]。
#### 示例代码展示
假设存在两个独立的 SCSS 文件——_variables.scss 和 _mixins.scss,它们分别定义了一些全局使用的颜色变量以及常用的布局混入规则。现在希望在一个名为 main.scss 的主文件里调用这些资源:
```scss
/* _variables.scss */
$primary-color: #3498db;
$font-stack: Helvetica, Arial, sans-serif;
/* _mixins.scss */
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
/* main.scss */
// 导入变量和混入规则
@import "variables";
@import "mixins";
body {
font-family: $font-stack;
background-color: $primary-color;
nav {
@include border-radius(5px);
}
}
```
上述例子展示了如何通过相对路径指定要引入的目标文件名(无需扩展名),从而完成对所需功能模块的有效集成[^4]。
值得注意的是,在现代前端开发实践中,推荐采用更先进的构建工具链如 Webpack 或 Parcel 来处理依赖关系管理等问题;对于较新版本的 SASS 编译器,则建议探索使用 `@use` 及 `@forward` 替代传统的 `@import` 方式以获得更好的性能表现与命名空间控制能力。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![.zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)