多个相同@font-face导入时设置粗细问题请教

Kareum-X 发布于 2019/07/02 02:42
阅读 106
收藏 0

em... 直接进入正题吧

我有俩字体 一个普通 一个粗体
都是一个字体只是粗细不一样

假设 A = 普通,B = 粗体

@font-face{
    font-family:'New Font Name';
    src: url('woff font A dir...') format('woff');
    font-weight:400
}
@font-face{
    font-family:'New Font Name';
    src: url('woff font B dir...') format('woff');
    font-weight:700
}

body{
    font-family:'New Font Name'
}
<!-- 正常粗细 -->
<span>TEST FONT FAMILY</span>
<!-- 粗体 -->
<strong>TEST FONT FAMILY</strong>

到这里是正常的也达到了我的效果

但是应用后觉得A字体太细太淡了,然后把A字体和B字体分开后发现

能在原本的字体上加粗细,比如:

@font-face{
    font-family:'New Font Name A';
    src: url('woff font A dir...') format('woff');
    /*font-weight:400*/
}
@font-face{
    font-family:'New Font Name B';
    src: url('woff font B dir...') format('woff');
    /*font-weight:700*/
}
.font-a{font-family:'New Font Name A'}
.font-b{font-family:'New Font Name B'}
<!-- 正常粗细 但比 原字体粗 -->
<strong class="font-a">TEST FONT FAMILY</strong>
<!-- 粗体 但比 原字体粗 -->
<strong class="font-b">TEST FONT FAMILY</strong>

这样两个字体比原来的粗一些,A字体也不觉得太细太淡了

但是总不能这么写,不能每次加CLASS,加入BODY也只能用其中一个

body{
    font-family:'New Font A','New Font B'
}

@font-face里设置是不行的,发现@font-face里的粗细是字体的分类
类似 两个 @font-face 声明 都是 New Font Name的时候
当前文字的粗细为 400或400以下 会选 A字体的 New Font Name
否则会选 B字体的 New Font Name,压根不是字体的粗细。
请问 有没有直接声明@font-face的时候 把字体的粗细也能调整呢?

这个坑我真的入错了吗?像我这样奇葩问题有人遇到过吗?T^T

 

 

加载中
返回顶部
顶部