如何使用 CSS 制作这种斜面文本效果？ [关闭]答案

【问题标题】：How do I make this beveled text effect with CSS? [closed]如何使用 CSS 制作这种斜面文本效果？ [关闭]
【发布时间】：2016-02-15 11:48:57
【问题描述】：

有没有什么方法可以只用 CSS 给文本这种斜面外观？

为了清楚起见，我正在寻找具有厚度但以斜切方式的文本。不是，例如，您使用 text-shadow 得到的，似乎只是 extend the edges of the font。

【问题讨论】：

而不是我如何...？尝试一些东西，如果失败了，问为什么......
我搜索了斜角文本、3d 文本、杂项文本效果等。似乎没有什么符合要求。
也许这会有所帮助：stackoverflow.com/questions/2889501/inner-text-shadow-with-css
我不确定为什么这个问题被否决了这么多次。对我来说，这似乎是 StackOverflow 的一个合适的问题。
所以我刚刚看到了这个codepen，它让我想起了这篇文章，虽然它不完全一样，而且它只是 Firefox/Webkit

标签： css

【解决方案1】：

根据我的经验，你不能。我见过的最接近的东西是 cmets 中提到的插入文本阴影技巧，我也没有在网上看到任何答案。

我假设 SEO 和可访问性是严格保持 HTML/CSS 分离的原因。这种效果可以通过带有相应 alt 属性的 img 标签（简单的解决方案）或通过使用带有适当后备的 SVG（用于可选择和可缩放的文本）来实现。此外，如果您正在寻找流动/环绕的文本，SVG 或许也可以处理。查看此答案以获取更多详细信息：Auto line-wrapping in SVG text

【讨论】：

【解决方案2】：

在这里，玩弄数字，直到得到满意的结果。

.inset {

color: rgba(10,60,150, 0.8);
text-shadow: 3px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}

http://codepen.io/damianocel/pen/yYGRBP

【讨论】：

我非常感谢您的回答（尤其是考虑到所有的反对意见），但恐怕我不知道如何将 3d 文本插图（互联网上的示例）带入有角度的 3d 开头（我在任何地方都找不到示例）。
最好在 photoshop 等中进行，或者在某处找到网络字体。这与您发布的内容接近：1001fonts.com/facets-nf-font.html