Question

我不允许使用图片，所以我试图制作一个我作为背景下载的字体 - 如果它可以在常规颜色之上。我希望字体（就像一个图像）会重演

我该怎么做？我正在尝试通过互联网看到的不同代码，但没有完全理解它们，所以我想这就是为什么他们没有工作......

我在一个段落中做过，但我想将它作为背景放在身体中

html代码

<p id="cookie1"> qqq </p> //shows a donut
<p id="cookie2"> qqq </p>

css代码

@font-face {
    font-family: allCandy;
    src: url(SUGAC___.TTF);
}

@font-face {
    font-family: candy;
    src: url(PeppermintCanes.otf);
}


#cookie1 {
   font-family: allCandy;
   font-size: 30px;
   position: relative;
   -webkit-animation-name: example; /* Chrome, Safari, Opera */
   -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#cookie2 {
   font-family: allCandy;
   font-size: 30px;
    position: relative;
    -webkit-animation-name: example2; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: example2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    z-index: 10;
}




/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {color:#FFAABD; top:0%}
    25%  {color:#FF3D87; }
    50%  {color: #CB30FF; }
    100% {color: #FFAABD; top:95%}
}

/* Standard syntax */
@keyframes example {
    0%   {color:#FFAABD; top:0%}
    25%  {color:#FF3D87; }
    50%  {color: #CB30FF; }
    100% {color: #FFAABD; top:95%}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example2 {
    0%   {color:#FFAABD; top:0%; left:80%}
    25%  {color:#FF3D87; }
    50%  {color: #CB30FF; }
    100% {color: #FFAABD; top:95%;  left:80%}
}

/* Standard syntax */
@keyframes example2 {
    0%   {color:#FFAABD; top:0%; left:80%}
    25%  {color:#FF3D87; }
    50%  {color: #CB30FF; }
    100% {color: #FFAABD; top:95%;  left:80%}
}

Answer 1

您不能直接将字体设置为背景，但解决方法是使用内容后面的字体设置div（使用z-index和绝对定位）我在codepen上做了一个示例： http://codepen.io/anon/pen/jWrLjR

CSS：

.background-font {
  /* Embedd the font you need */
  width: 100%;
  height: 100%;
  z-index: 0;
  font-size: 5em;
  position: absolute;
  /* make font not selectable*/
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  -o-user-select: none;
  user-select: none;
}

.content {
  position: absolute;
  background: rgba(0,0,0,0.5);
  color: red;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
}

HTML：

<div class="background-font">
  Your Background
</div>
<div class="content">
  Your Content<br>
  Goes here<br>
  Another line
</div>

如何将下载的字体作为背景？

1 个答案: