給網頁換個鴻蒙字型

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 協議》,轉載必須註明作者和本文連結