特产网站设计,六色网站,手机网站商城建设答辩,做的网站为什么图片看不了怎么办uniapp vue3 使用 鸿蒙开源字体
我的需求是全局使用鸿蒙字体。 所以#xff1a;
0. 首先下载鸿蒙字体#xff1a;
鸿蒙资源 下载后解压#xff0c;发现里面有几个文件夹#xff1a; 字体名称说明Sans默认的鸿蒙字体#xff0c;支持基本的多语言字符#xff08;包括字…uniapp vue3 使用 鸿蒙开源字体
我的需求是全局使用鸿蒙字体。 所以
0. 首先下载鸿蒙字体
鸿蒙资源 下载后解压发现里面有几个文件夹 字体名称说明Sans默认的鸿蒙字体支持基本的多语言字符包括字母、数字和部分中文。Sans_SC鸿蒙字体的简体中文版本专门优化了简体中文字形。Sans_TC鸿蒙字体的繁体中文版本专门优化了繁体中文字形。Sans_Italic鸿蒙字体的斜体版本适用于字母和数字的斜体显示。Sans_Condensed鸿蒙字体的压缩版本适用于需要紧凑排版的场景。Sans_Condensed_Italic鸿蒙字体的压缩斜体版本适用于需要紧凑排版且斜体显示的场景。Sans_Naskh_Arabic鸿蒙字体的阿拉伯语版本专门优化了阿拉伯语字形。Sans_Naskh_Arabic_UI鸿蒙字体的阿拉伯语 UI 版本适用于用户界面的阿拉伯语显示。
如果你需要支持 简体中文 和 字母数字应该使用以下字体
HarmonyOS_Sans_SC.ttf这是鸿蒙字体的简体中文版本专门优化了简体中文字形同时支持字母和数字。
1. 把字体文件放入目录 2. 写入App.vue
script
export default {onLaunch: function () {// console.log(App Launch)const fonts [{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Thin.ttf, weight: 100 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Light.ttf, weight: 300 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Regular.ttf, weight: 400 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Medium.ttf, weight: 500 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Bold.ttf, weight: 700 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Black.ttf, weight: 900 },]fonts.forEach(font {uni.loadFontFace({family: font.name,source: url(${font.path}),weight: font.weight.toString(),success: () {console.log(字体 ${font.name} (${font.weight}) 加载成功)},fail: (err) {console.error(字体 ${font.name} (${font.weight}) 加载失败, err)}})})},onShow: function () {// console.log(App Show)},onHide: function () {// console.log(App Hide)}
}
/scriptstyle langscss
/* 引入 uview-plus 和 uni-scss */
import uview-plus/index.scss;
import uni_modules/uni-scss/index.scss;/* 引入鸿蒙字体的多字重 */
font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Thin.ttf) format(truetype);font-weight: 100; /* Thin */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Light.ttf) format(truetype);font-weight: 300; /* Light */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Regular.ttf) format(truetype);font-weight: 400; /* Regular */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Medium.ttf) format(truetype);font-weight: 500; /* Medium */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Bold.ttf) format(truetype);font-weight: 700; /* Bold */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Black.ttf) format(truetype);font-weight: 900; /* Black */
}/* 设置全局字体 */
page {font-family: HarmonyOS Sans, sans-serif;font-weight: 500; /* 默认使用 Medium字重 */background-color: #edf0f4; /* 页面背景色 */
}/* 设置 uview-plus 组件的默认字体 */
.u-page {font-family: HarmonyOS Sans, sans-serif;
}
/style预加载字体可选
为了确保字体加载成功可以在 onLaunch 生命周期中使用 uni.loadFontFace 预加载字体。
script
export default {onLaunch: function () {// console.log(App Launch)const fonts [{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Thin.ttf, weight: 100 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Light.ttf, weight: 300 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Regular.ttf, weight: 400 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Medium.ttf, weight: 500 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Bold.ttf, weight: 700 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Black.ttf, weight: 900 },]fonts.forEach(font {uni.loadFontFace({family: font.name,source: url(${font.path}),weight: font.weight.toString(),success: () {console.log(字体 ${font.name} (${font.weight}) 加载成功)},fail: (err) {console.error(字体 ${font.name} (${font.weight}) 加载失败, err)}})})},onShow: function () {// console.log(App Show)},onHide: function () {// console.log(App Hide)}
}
/script也可以在页面中使用字体
在具体的页面中你可以直接使用 font-family: ‘HarmonyOS Sans SC’ 来应用字体。
templateview classcontainertext classtext这是一段测试文本简体中文/texttext classtextHello, 123456/text/view
/templatescript setup
// 页面逻辑
/scriptstyle scoped
.container {padding: 20px;
}.text {font-family: HarmonyOS Sans SC, sans-serif;font-size: 16px;color: #333;
}
/style如果要兼容微信小程序
script
export default {onLaunch: function () {// 小程序环境动态加载字体// #ifdef MP-WEIXINconst fonts [{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Thin.ttf, weight: 100 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Light.ttf, weight: 300 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Regular.ttf, weight: 400 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Medium.ttf, weight: 500 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Bold.ttf, weight: 700 },{ name: HarmonyOS Sans, path: /static/fonts/HarmonyOS_Sans_SC_Black.ttf, weight: 900 },];fonts.forEach(font {uni.loadFontFace({family: font.name,source: url(${font.path}),weight: font.weight.toString(),success: () {console.log(字体 ${font.name} (${font.weight}) 加载成功);},fail: (err) {console.error(字体 ${font.name} (${font.weight}) 加载失败, err);}});});// #endif},onShow: function () {// console.log(App Show)},onHide: function () {// console.log(App Hide)}
}
/scriptstyle langscss
/* 引入 uview-plus 和 uni-scss */
import uview-plus/index.scss;
import uni_modules/uni-scss/index.scss;/* 引入鸿蒙字体的多字重 */
/* H5 环境直接使用 font-face */
/* #ifdef H5 */
font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Thin.ttf) format(truetype);font-weight: 100; /* Thin */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Light.ttf) format(truetype);font-weight: 300; /* Light */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Regular.ttf) format(truetype);font-weight: 400; /* Regular */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Medium.ttf) format(truetype);font-weight: 500; /* Medium */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Bold.ttf) format(truetype);font-weight: 700; /* Bold */
}font-face {font-family: HarmonyOS Sans;src: url(/static/fonts/HarmonyOS_Sans_SC_Black.ttf) format(truetype);font-weight: 900; /* Black */
}
/* #endif *//* 设置全局字体 */
page {font-family: HarmonyOS Sans, sans-serif;font-weight: 500; /* 默认使用 Medium 字重 */background-color: #edf0f4; /* 页面背景色 */
}/* 设置 uview-plus 组件的默认字体 */
.u-page {font-family: HarmonyOS Sans, sans-serif;
}
/style
如果使用网络字体
font-face {font-family: HarmonyOS Sans;src: url(https://your-domain.com/fonts/HarmonyOS_Sans_SC_Regular.ttf) format(truetype);font-weight: 400;
}
