如何将渐变添加到字体（CSS）？

Question

我正在寻找一种向大粗体字母添加渐变的方法：

单词可以有一行或两行，字体高度因视口高度而异。

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

您推荐使用纯CSS解决方案吗？

Answer 1

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

Answer 2

我同意纳撒尼尔上面所说的，但如果你还想尝试，那么你可以这样做：

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>

Answer 3

重点是这个功能不是很容易与不同的浏览器兼容，但是我花时间为你google并找到了这个： http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

希望它可以帮助你。

编辑：评论中的人让我意识到这不适用于文本的事实我发现这篇文章给你的答案是： http://webdesignerwall.com/tutorials/css-gradient-text-effect