如何为字体（CSS）添加渐变？答案

【问题标题】：How to add gradient to font face (CSS)?如何为字体（CSS）添加渐变？
【发布时间】：2012-04-12 11:29:34
【问题描述】：

我正在寻找一种为大粗体字母添加渐变的方法，如下所示：

单词可以有一行或两行，字体高度取决于视口高度。

此示例适用于 Chrome，但不适用于 FF：http://dabblet.com/gist/1695257

您有什么可以推荐的纯 CSS 解决方案吗？

【问题讨论】：

不，你要的还在“提案”阶段。浏览器对此达成一致还需要一段时间。
那个链接中使用的方法怎么不是纯CSS？
@JoshDavenport 这是纯 CSS，但不是工作 CSS！
@MrLister：当然。该评论虽然参考了原始问题
文本渐变有几种技巧，每一种都有自己的局限性：google.com/search?q=css+tricks+text+gradient

标签： css fonts font-face gradient

【解决方案1】：

在非 webkit 浏览器中，根本不可能在纯 css 中做到这一点。您的示例是在 webkit 中执行此操作的正确方法，但我会进行 webkit 检测媒体查询，以确保 Firefox 永远不会尝试在没有文本剪辑的情况下使用渐变（阅读 CSS prefixes are becoming a threat - but is Webkit really to blame?），如 so。我可以提醒你，这是非规范的东西，你真的不应该使用它。

【讨论】：

【解决方案2】：

我同意 Nathaniel 上面所说的，但如果你仍然想尝试，那么你可以这样做：

Sample Code @ Codepen

<style>
h1 {
font-size: 60px;
text-align: center;
margin: 40px;
color: #000;
}

h1.methodA {
background: -webkit-linear-gradient(top, #1965a9, #000);
background: linear-gradient(top, #1965a9, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h1.methodB {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
}
</style>

<h1 class="methodA">Awesome Gradient Text Method A</h1>

<h1 class="methodB">Awesome Gradient Text Method B</h1>

【讨论】：

【解决方案3】：

关键是这个功能不是很容易兼容不同的浏览器，但是我花时间为你搜索了一下，发现： http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

希望对你有所帮助。

编辑：cmets 中的人让我意识到这不适用于文本，因此我发现另一篇文章为您提供了答案： http://webdesignerwall.com/tutorials/css-gradient-text-effect

【讨论】：

OP 希望渐变文本，而不是背景
我认为上述方法可以应用于任何对象，而不仅仅是背景，因为文本可以作为具有 w 和 h 属性的对象返回
@dennis 不，背景渐变是图像。您不能将图像应用于文本。自己试试吧。