如何添加梯度字型（CSS）？(How to add gradient to font face (C

我正在寻找一种方式来增加梯度大粗体字是这样的：

话可以有一个或两个线和字体高度取决于视口的高度。

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

你有什么建议的任何工作纯CSS的解决方案？

Answer 1:

我同意什么纳撒尼尔上面说的，但如果你仍然想尝试一下，那么你可以这样做：

示例代码@ 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 2:

在所有要做到这一点，在非WebKit浏览器纯CSS这是不可能的。 你举的例子是做WebKit中正确的方式，但我会做一个WebKit的检测媒体查询，以确保公正的Firefox从来没有尝试使用渐变无文本片段（读取CSS前缀正在成为一个威胁-但WebKit的真正怪谁呢？ ）喜欢这样 。 我想提醒你，这是不规范的东西，你真的不应该使用它。

Answer 3:

问题的关键是，这个功能不是很容易与不同的浏览器兼容的，然而我花时间，以谷歌为你而发现这一点： http://robertnyman.com/2010/02/15/css-gradients-for-all-网络浏览器，而无需-使用图像/

希望它可以帮助你。

编辑：在评论的人让我知道的事实，这不会对文字工作，为此，我发现这个其他文章至极给你这个问题的答案： http://webdesignerwall.com/tutorials/css-gradient-text-影响

文章来源: How to add gradient to font face (CSS)?