給網頁換個鴻蒙字型

zoang發表於2021-07-03
網頁鴻蒙

字源傳送門：鴻蒙字型 通用設計->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 協議》，轉載必須註明作者和本文連結

相關文章