如何使用 CSS 为文本填充颜色？

Question

我正在使用这个wonderful font 来制作预测图标，当我尝试使用 CSS3 组合图标以动画它们时，我尝试使用云隐藏太阳，但我需要用颜色填充云，是否可以使用 CSS，或者我需要将其作为 SVG 或 Canvas 放置？

图片如下：

Answer 1

为什么不尝试自己制作图标，而不是使用图标？这是一个仅使用 css 的“云和太阳”示例的基本模型：

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.sun {
  height: 30px;
  width: 30px;
  background: yellow;
  border-radius: 50%;
  position: absolute;
  left: 55px;
  top: 10px;
  box-shadow: 0 0 2px 2px white, 0 0 4px 4px yellow;
}

<div class="wap">
  <div class="cloud"></div>
  <div class="sun"></div>
</div>

---

下雨了吗？

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.rain {
  height: 30px;
  width: 55px;
  transform:rotate(10deg);
  background: -moz-linear-gradient(left,  rgba(108,144,252,1) 0%, rgba(108,144,252,0) 1%, rgba(108,144,252,0) 9%, rgba(108,144,252,1) 10%, rgba(108,144,252,0) 11%, rgba(108,144,252,0) 19%, rgba(108,144,252,1) 20%, rgba(108,144,252,0) 21%, rgba(108,144,252,0) 29%, rgba(108,144,252,1) 30%, rgba(108,144,252,0) 31%, rgba(108,144,252,0) 39%, rgba(108,144,252,1) 40%, rgba(108,144,252,0) 41%, rgba(108,144,252,0) 49%, rgba(108,144,252,1) 50%, rgba(108,144,252,0) 51%, rgba(108,144,252,0) 59%, rgba(108,144,252,1) 60%, rgba(108,144,252,0) 61%, rgba(108,144,252,0) 69%, rgba(108,144,252,1) 70%, rgba(108,144,252,0) 71%, rgba(108,144,252,0) 79%, rgba(108,144,252,1) 80%, rgba(108,144,252,0) 81%, rgba(108,144,252,0) 89%, rgba(108,144,252,1) 90%, rgba(108,144,252,0) 91%, rgba(108,144,252,0) 99%, rgba(108,144,252,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(108,144,252,1)), color-stop(1%,rgba(108,144,252,0)), color-stop(9%,rgba(108,144,252,0)), color-stop(10%,rgba(108,144,252,1)), color-stop(11%,rgba(108,144,252,0)), color-stop(19%,rgba(108,144,252,0)), color-stop(20%,rgba(108,144,252,1)), color-stop(21%,rgba(108,144,252,0)), color-stop(29%,rgba(108,144,252,0)), color-stop(30%,rgba(108,144,252,1)), color-stop(31%,rgba(108,144,252,0)), color-stop(39%,rgba(108,144,252,0)), color-stop(40%,rgba(108,144,252,1)), color-stop(41%,rgba(108,144,252,0)), color-stop(49%,rgba(108,144,252,0)), color-stop(50%,rgba(108,144,252,1)), color-stop(51%,rgba(108,144,252,0)), color-stop(59%,rgba(108,144,252,0)), color-stop(60%,rgba(108,144,252,1)), color-stop(61%,rgba(108,144,252,0)), color-stop(69%,rgba(108,144,252,0)), color-stop(70%,rgba(108,144,252,1)), color-stop(71%,rgba(108,144,252,0)), color-stop(79%,rgba(108,144,252,0)), color-stop(80%,rgba(108,144,252,1)), color-stop(81%,rgba(108,144,252,0)), color-stop(89%,rgba(108,144,252,0)), color-stop(90%,rgba(108,144,252,1)), color-stop(91%,rgba(108,144,252,0)), color-stop(99%,rgba(108,144,252,0)), color-stop(100%,rgba(108,144,252,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c90fc', endColorstr='#6c90fc',GradientType=1 ); /* IE6-9 */

  position: absolute;
  left: 18px;
  top: 35px;
 }

<div class="wap">
  <div class="cloud"></div>
  <div class="rain"></div>
</div>

---

雷声？

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.thunder {
  height: 20px;
  width: 20px;
  border-right: 2px solid yellow;
  border-top: 2px solid yellow;
  transform: rotate(55deg);
  position: absolute;
  left: 15px;
  top: 40px;
}
.thunder:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 5px;
  height: 20px;
  width: 30px;
  border-right: 2px solid yellow;
  border-top: 2px solid yellow;

<div class="wap">
  <div class="cloud"></div>
  <div class="thunder"></div>
</div>

Answer 2

如果字体不包含实心云图，则无法在 CSS 中执行此操作。

使用 SVG 图像可以做到这一点。幸运的是，字体下载包含许多示例和字体的 SVG 版本，所以也许您可以从那里提取图像并根据需要进行修改。

实际上，由于您所需要的只是云和太阳之间的白色背景，因此您可能会使用一两个 CSS 基本圆形形状，而使用字体本身来制作更详细的云和太阳形状。

Answer 3

由于已经给出了答案，这仅用于最终使用 text-shadow 的好奇部分。

运行下面的 sn-p 以了解它的内容或玩这个 codepen。

@font-face {
	font-family: "iconvault";
	src: url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.eot");
	src: url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.woff") format("woff"),
	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.ttf") format("truetype"),
	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.svg#iconvault") format("svg");
	font-weight: normal;
	font-style: normal;
}
	
	
	

[class^="icon-"],
[class*=" icon-"] {
  font-family: 'iconvault';
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  font-size: 86px;

}





body {
  background:lightblue;
  font-size:1.25em;
}



/* -----Cloud----- */
.icon-cloud{
position:relative;
}
	.icon-cloud::after {
	content: "\f106";
	color:rgb(204, 204, 204);
	position: absolute;
    text-shadow:0 0 2px #aaa;

	}
.icon-cloud::before {
	content: "\f106";
	color:rgb(204, 204, 204);
	position: absolute;
font-size:0.55em;
top:.45em;
left:.45em;
text-shadow:2px 0 , -2px 0, 2px 2px, -2px -2px, 0 2px , 0-2px,
4px 0 , -4px 0, 4px 4px, -4px -4px, 0 4px , 0-4px,
6px 0 , -6px 0, 6px 6px, -6px -6px, 0 6px , 0-6px,
8px 0 , -8px 0, 8px 7px, -8px -8px, 0 7px , 0 -8px,
11px 0 , -11px 0px, -12px 5px, -14px 0px, -10px 3px , -9px 3px,
 0 -6px , 0 -10px , 0 -11px, 2px -11px, 4px -11px;
font-weight:bold

	}
.inherit.icon-cloud::before {
  color:inherit;
}
.yellow.icon-cloud::before {
  color:yellow;
}
.purple.icon-cloud::before {
  color:purple;
}
.red.icon-cloud::before {
  color:red;
}
.white.icon-cloud::before {
  color:white;
}
.transparent.icon-cloud::before {
  color:transparent;
}.cotton.icon-cloud::before {
  text-shadow:5px 5px 10px gray,-5px -5px 10px gray,-5px -5px 20px gray,-5px -5px  20px gray;
}
div {
  display:inline-block;
}
li {
  list-style-type:none;
}

<div class='two columns'>
  <ul>
    <li class="icon-cloud"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud cotton transparent"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud red"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud purple"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud yellow"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud inherit"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud white"></li>
    <p>Cloudy</p>
  </ul>
</div>

<div class='two columns'>
  <ul>
    <li class="icon-cloud transparent"></li>
    <p>Cloudy</p>
  </ul>
</div>