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

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>