小程序怎么设置思源黑体
时间: 2023-10-13 07:22:35 浏览: 261
小程序的字体设置主要是通过在代码中引入字体库来实现的。要使用思源黑体,可以按照以下步骤操作:
1. 在小程序的根目录下新建一个文件夹,命名为“fonts”(可以自定义名称)。
2. 下载思源黑体字体文件(.ttf或.otf格式),将文件保存到“fonts”文件夹中。
3. 在app.wxss文件中引入字体库,代码如下:
```css
/* 引入思源黑体 */
@font-face {
font-family: 'SourceHanSansCN';
src: url('./fonts/SourceHanSansCN-Bold.otf') format('truetype');
font-weight: bold;
font-style: normal;
}
/* 设置全局字体 */
body {
font-family: 'SourceHanSansCN';
}
```
其中,@font-face用于定义字体库,src属性指定字体文件路径和格式,font-weight和font-style用于定义字体的样式。在body中设置字体时,直接指定字体的名称即可。
4. 在需要使用思源黑体的页面或组件中,通过样式类的方式来应用字体,代码如下:
```html
<view class="text-sourcehan">这是思源黑体字体</view>
```
```css
/* 应用思源黑体样式 */
.text-sourcehan {
font-family: 'SourceHanSansCN';
font-size: 16px;
font-weight: bold;
}
```
这样就可以在小程序中使用思源黑体了。需要注意的是,由于思源黑体是开源字体,版权归属于Adobe和Google,使用时需要遵守相关的许可协议。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.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://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pptx](https://img-home.csdnimg.cn/images/20241231044947.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)