如何添加渐变到字体（CSS）？ [英] How to add gradient to font face (CSS)?

问题描述

我在寻找一种方法来添加渐变到大粗体字母像这样：

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

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

解决方案

/ div>

我同意Nathaniel上面说的，但如果你还是想尝试它，你可以这样做：

示例代码@ 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>真棒渐层文字方法A< / h1> 
 
< h1 class =methodB>真棒渐层文字方法B< / h1> 
  

I'm looking for a way to add gradient to big bold letters like this:

Words can have either one or two lines and font height varies depending on viewport height.

This example works in Chrome but not FF: http://dabblet.com/gist/1695257

Is there any working pure-CSS solution you would recommend?

解决方案

I agree what Nathaniel said above, but if you still want to try it, then you can do this:

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>

这篇关于如何添加渐变到字体（CSS）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！