极客观点
项目管理
HarmonyOS
意外发现苹果官网右上角广告两个字的字体大小为 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之前的删掉）