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

我不允许使用图像，所以我试图制作一个我作为背景下载的字体 - 并且如果它可能在普通颜色的顶部。我希望字体（就像图像一样）重复自己如何制作下载的字体作为背景？

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

我做了一段，但我想把它放在主体作为背景

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%} 
}

来源

2015-12-21 user3488862

请给出你没有用的代码帮助部分了解的explnation！ –

不能直接设置字体为背景，但一个解决办法是设置与您的内容背后的字体股利（用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>

来源

2015-12-21 22:23:14

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

回答

相关问题