给网页换个鸿蒙字体

字源传送门:鸿蒙字体 通用设计->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 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 6

换了之后你的网站忽悠人能力直线提升!

2年前 评论
zoang (楼主) 2年前

也不知道贴个图让我们这么不想安装的人瞧瞧,嗯....不懂事,差评

2年前 评论
sreio 2年前
mingzaily 2年前

大佬,我就想问问您用什么方式压缩的ttf文件?

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!