给网页换个鸿蒙字体
字源传送门:鸿蒙字体 通用设计->HarmonyOS Sans
压缩传送门:字体转换
小心,你需要学会压缩字体哦,不然8M的字体,吃不消。
使用步骤:下载好字体包解压,只需要HarmonyOS_Sans_SC(中英文字体)放到网站相应目录
一、CSS引入
@font-face {
font-style: normal;
font-family: 'Harmony_Regular';
/*引入HarmonyOS_Sans_SC,目录别搞错*/
src: url('../fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
}
二、网页CSS设置优先
font-family: 'Harmony_Regular', sans-serif;
参考示例:Laravel + Tailwind CSS
resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@font-face {
font-style: normal;
font-family: 'Harmony_Regular';
src: url('../fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
}
tailwind.config.js
参考 Tailwind CSS 主题配置
//省略...
theme: {
extend: {
fontFamily: {
sans: ['Harmony_Regular', ...defaultTheme.fontFamily.sans],
},
},
},
//省略...
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: