关于前端引入字体文件字号问题

前端css属性 font-weight 权重为 100-1000

拟定引入文件如下

fonts\HarmonyOS_Sans_SC_Black.ttf 
fonts\HarmonyOS_Sans_SC_Bold.ttf 
fonts\HarmonyOS_Sans_SC_Light.ttf 
fonts\HarmonyOS_Sans_SC_Medium.ttf 
fonts\HarmonyOS_Sans_SC_Regular.ttf 
fonts\HarmonyOS_Sans_SC_Thin.ttf 

css代码

/* HarmonyOS Sans SC Black */
@font-face {
    font-family: 'HarmonyOS_Sans_SC';
    src: url('fonts/HarmonyOS_Sans_SC_Black.ttf') format('truetype');
    font-weight: 900; /* 使用900代表最粗的Black样式 */
    font-style: normal;
}

/* HarmonyOS Sans SC Bold */
@font-face {
    font-family: 'HarmonyOS_Sans_SC';
    src: url('fonts/HarmonyOS_Sans_SC_Bold.ttf') format('truetype');
    font-weight: 700; /* 标准的Bold样式通常对应700 */
    font-style: normal;
}

/* HarmonyOS Sans SC Medium */
@font-face {
    font-family: 'HarmonyOS_Sans_SC';
    src: url('fonts/HarmonyOS_Sans_SC_Medium.ttf') format('truetype');
    font-weight: 500; /* Medium样式一般对应500 */
    font-style: normal;
}

/* HarmonyOS Sans SC Regular */
@font-face {
    font-family: 'HarmonyOS_Sans_SC';
    src: url('fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
    font-weight: 400; /* Regular样式默认为400 */
    font-style: normal;
}

/* HarmonyOS Sans SC Light */
@font-face {
    font-family: 'HarmonyOS_Sans_SC';
    src: url('fonts/HarmonyOS_Sans_SC_Light.ttf') format('truetype');
    font-weight: 300; /* Light样式一般对应300 */
    font-style: normal;
}

/* HarmonyOS Sans SC Thin */
@font-face {
    font-family: 'HarmonyOS_Sans_SC';
    src: url('fonts/HarmonyOS_Sans_SC_Thin.ttf') format('truetype');
    font-weight: 100; /* Thin样式一般对应100 */
    font-style: normal;
}

根据实际字体粗细情况调整 font-weight 值，以确保样式匹配准确。在HTML或CSS中使用这个自定义字体时，只需指定 font-family: 'HarmonyOS_Sans_SC'; 并通过 font-weight 属性选择所需的字重即可。

body {
    font-family: 'HarmonyOS_Sans_SC', sans-serif;
    font-weight: 400; /* 使用Regular样式 */
}