@font-face本地字体别名失效问题：为何定义被忽略？

我尝试为本地字体「PingFang SC」创建别名「Test」，通过@font-face定义后，期望「Test」与「PingFang SC」使用相同字体，但实际该定义被忽略。注释掉样式类.with-font中的font-family: PingFang SC语句后，显示字体发生变化，请问导致@font-face被忽略的原因是什么？

<html lang="en">
<head>
    <style>
        @font-face {
            font-family: "Test";
            src: local(PingFang SC);
        }

        .with-font {
            font-family: "Test";
            font-family: PingFang SC;
        }

    </style>
    <title>Font test</title>
</head>
<body>
    <div class="with-font">对方出招有快有慢</div>
</body>
</html>

这是CSS层叠优先级规则直接导致的：在同一个CSS选择器（此处为.with-font）内部，相同属性的重复声明，后面的会直接覆盖前面的。

你在.with-font里先声明了font-family: "Test";，紧接着又写了font-family: PingFang SC;，浏览器只会识别并应用最后一个font-family的属性值，所以你通过@font-face定义的别名「Test」根本没被启用，看起来就像是被忽略了。

当你注释掉后面的font-family: PingFang SC;后，前面的font-family: "Test";才会生效，浏览器才会调用你通过@font-face绑定的字体。

内容的提问来源于stack exchange，提问作者Mikalai Ushanau