Question

我已经看过关于这个主题的其他解决方案，但是他们都没有做我需要（或想要）的结果。

问题是，Mac以笨拙的方式呈现某些字体，字体太粗，即使是常规样式。这很烦人！

所以我认为我会选择CSS-Workaround来让字体看起来更薄。我所能想到的只是文本的内在阴影，希望它们不会变得太模糊，但说起来容易做起来难，文字阴影不支持这个（无论出于何种原因）。

有没有人知道如何实现这种效果？

Answer 1

我认为这将是一场失败的战斗，如果你现在考虑到这一点，而不是仅仅以固定分辨率处理字体的可能性（72dpi，显示器上的标准大约十年左右，现在），你还必须处理一些Mac的“视网膜显示器”，其分辨率约为220-227ppi。

我也确定我在某处看到那些尚未在视网膜显示器上正确缩放的程序必须由操作系统进行插补，因此很可能从Mac到Mac，从浏览器到浏览器，同样的字体看起来会有很大的不同。截至目前，我唯一可以确认拥有Retina支持的浏览器是Safari（那里有大惊喜，对吗？）和Chrome。

（有关此主题的更多信息，请参阅此问题：https://apple.stackexchange.com/questions/54905/retina-macbook-pro-fonts-look-terrible）

如果您真的致力于尝试击中此移动目标，您可以根据像素比率使用媒体查询来改变使用的字体。

@media all and (-webkit-min-device-pixel-ratio: 2) {
    /* all your retina-display-tweaked settings, here */
}

Answer 2

也许这有点太多了，但我认为这正是你所寻找的。

使用以下内容添加文本内部阴影效果：＆amp; ：后

.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(255,255,255,.1);
position: absolute;
}

.depth:before { top: 3px; left: 3px }
.depth:after  { top: 4px; left: 4px }

jsFiddle：http://jsfiddle.net/4GAkK/

为更薄的字体实现内部文本阴影

2 个答案: