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

Question

我已经看到了关于这个主题的其他解决方案，但没有一个能达到我需要（或想要）的结果。

问题是，Mac 以一种尴尬的方式呈现一些字体，字体太厚了，即使在常规样式上也是如此。这很烦人！

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

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

Answer 1

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

我也确定我在某处读到，那些没有被重写以在视网膜显示器上正确缩放的程序必须由操作系统插值，所以很有可能，从 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

也许这有点太大的影响，但我认为这就是你正在寻找的。

使用 :before & :after 添加文本内阴影效果

.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/