小程序怎么设置思源黑体
时间: 2023-10-13 09:22:35 浏览: 209
嵌入式思源黑体
小程序的字体设置主要是通过在代码中引入字体库来实现的。要使用思源黑体,可以按照以下步骤操作:
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,使用时需要遵守相关的许可协议。
阅读全文