uniapp view 中字体修改字体为 思源黑体
时间: 2023-10-10 17:13:41 浏览: 367
要在UniApp中将视图中的字体更改为思源黑体,可以使用以下步骤:
1.从Google Fonts或其他字体库中下载思源黑体。
2.将字体文件放置在UniApp项目中的font文件夹中。
3.在app.vue或需要更改字体的视图中的style标签中添加以下CSS代码:
@font-face {
font-family: 'SourceHanSansCN-Regular';
src: url('../font/SourceHanSansCN-Regular.ttf');
}
body {
font-family: 'SourceHanSansCN-Regular', sans-serif;
}
这将在视图中将字体更改为思源黑体。请注意,您需要将CSS代码中的字体家族和字体文件路径替换为您下载的字体的名称和路径。
希望这可以帮助您更改UniApp视图中的字体为思源黑体。
相关问题
uniapp view 中字体修改字体为楷体
您可以在App.vue中添加以下全局样式代码来修改字体为楷体:
```css
<style>
/* 修改全局字体为楷体 */
body {
font-family: "楷体";
}
</style>
```
如果您只想修改某个页面的字体,可以在该页面的vue文件中添加以下样式代码来修改字体为楷体:
```css
<style scoped>
/* 修改当前页面字体为楷体 */
.page {
font-family: "楷体";
}
</style>
```
请注意,如果您的字体文件不在项目中的static文件夹中,您需要在css中引用相应的字体文件。例如:
```css
@font-face {
font-family: "楷体";
src: url("../../static/fonts/KaiTi.ttf");
}
```
这里的`../../static/fonts/KaiTi.ttf`是相对于该css文件的路径,您需要根据您的实际情况进行修改。
uniapp view 中字体修改字体为微信官方字体
要在uniapp视图中使用微信官方字体,需要按照以下步骤进行操作:
1. 下载微信官方字体库。
2. 在uniapp项目的static文件夹中创建一个新的文件夹,例如“fonts”。
3. 将下载的微信官方字体库中的.ttf文件复制到刚刚创建的“fonts”文件夹中。
4. 在uniapp项目的App.vue文件中添加以下代码:
```javascript
<style>
@font-face {
font-family: 'WeChatFont';
src: url('/static/fonts/WeChatFont.ttf') format('truetype');
}
html,body{
font-family: 'WeChatFont';
}
</style>
```
5. 在需要使用微信官方字体的vue组件中,将需要使用微信官方字体的部分的font-family属性设置为“WeChatFont”,例如:
```html
<view style="font-family: WeChatFont;">这是微信官方字体</view>
```
6. 重新运行uniapp项目,即可在视图中使用微信官方字体。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.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)
![](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)
![](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)
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)