uniapp如何设置自定义的思源黑体

admin2年前 (2023-07-13)前端技术1176

要在 Uniapp 中全局默认使用自定义的思源黑体字体,您可以按照以下步骤进行操作:

  1. 在项目的 static 目录下创建一个名为 font 的文件夹(如果不存在)。

  2. 将思源黑体的字体文件(通常为 .ttf 或 .otf 格式)放入 font 文件夹中。

  3. 在 App.vue 文件中添加以下代码:

<style>
@font-face {
  font-family: 'SourceHanSansCN';
  src: url('/static/font/SourceHanSansCN-Regular.ttf');
}

body {
  font-family: 'SourceHanSansCN';
}
</style>

请确保 url 中的路径与您在 static 文件夹下创建的 font 文件夹路径和字体文件名称一致。

在上面的示例中,我们在 @font-face 中定义了思源黑体字体,并将其命名为 'SourceHanSansCN'。然后,我们使用 body 元素的 font-family 属性将该字体应用于全局。

通过按照上述步骤设置自定义的思源黑体字体,并将其应用于全局,您应该能够在 Uniapp 中默认使用该字体。


相关文章

win11关闭自动更新!全新方法,零副作用!

win11关闭自动更新!全新方法,零副作用!

在cmd命令中输入reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings&quo...

推荐一款在线的Excel表格开发库——x-spreadsheet

推荐一款在线的Excel表格开发库——x-spreadsheet

前言这是一个个人开发的项目,其他的开源表格库不能满足作者自己的开发需求,所以就自己开发一套类似的 google sheet的在线表格库并且开源出来,曾在一个星期内获得三千个star安装可以使用 npm...

图片压缩神器,直接可以在前端用

图片压缩神器,直接可以在前端用

前言js-image-compressor 是一个实现轻量级图片压缩的 javascript 库,压缩后仅有 5kb,在前端页面即可实现对图片的压缩。在提供基本图片压缩功能同时,还暴露出图片...

程序员必备的JSON可视化工具

程序员必备的JSON可视化工具

前言JSON文本难于阅读,格式化也不够直观,而且当数据量大的时候还会造成卡顿,今天推荐一个JSON可视化工具,让你一眼看穿JSON——jsoncrack无论您是从事大型项目的开发人员,还是希望发现隐藏...