给网页换个鸿蒙字体

2024-06-04 20:32| 来源: 网络整理| 查看: 265

字源传送门：鸿蒙字体通用设计->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 协议》，转载必须注明作者和本文链接

【本文地址】

给网页换个鸿蒙字体

给网页换个鸿蒙字体

今日新闻

推荐新闻