苹果官网“<广告>”字体大小小于12px实现方式是什么？_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

意外发现苹果官网右上角广告两个字的字体大小为 12px，但字体实际大小却比 12px 还要小，浏览器默认 12px 以下都为 12px，调试模式查看样式并没有使用 transform 属性，请教下实现方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <style>
        body {
            background-color: #444;
        }
        p {
            color: #a8a8aa;
            -webkit-font-smoothing: antialiased;
            font-style: normal;
            font-weight: 400;
            font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>
</head>
<body>
    <p style="font-size:12px;"><广告></p>
    <p style="font-size:14px;">技术支持</p>
</body>
</html>

###

不是一个字体。

你虽然拷贝了人家的 font-family 样式，但前面那几个 SF Pro ** 的字体，是人家 CSS 里动态加载进来的，你电脑上并没有。所以你本地写个网页，命中的字体是 PingFang SC；苹果的命中的字体是 SF Pro SC。

我把字体都改成 PingFang SC，看上去是不是就一样大了？

（左侧是苹果官网截图，右侧是你问题里那段 HTML 的截图。两者只调整 font-family，把 PingFang SC 之前的删掉）

###

下面图片，我去苹果官网，先把头部所有引用的css删掉，没有css后，在页面添加了一个新的【广告】，然后css让它和官网的重合，基本是完全重合的，说明这个12px是正常的，你看见的获取是视觉差，同下面字体大小对比，看起来比较小吧

屏幕快照 2020-06-23 10.04.54.png

苹果官网“&lt;广告&gt;”字体大小小于12px实现方式是什么？

苹果官网“<广告>”字体大小小于12px实现方式是什么？