div 中的样式化文本

Question

我正在尝试对 div 中的一些文本进行样式化。如果您查看下面我的实时链接，您会看到我需要添加风格化文本的方块，下面还有一张我创建的图像，展示了我希望风格化文本如何出现。

Here is the image I'm trying to duplicate using CSS and text

有人可以告诉我如何实现吗？

CSS

.trigger {
width:200px;
height:200px;
}
.trigger.large {
width: 400px;
}
.trigger.vertical {
height: 400px;
}
.trigger.vertical * {
height: 400px;
}
.hover-img, .hover-img.hover_effect {
background-color: #FFFFFF;
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
.trigger:hover > .hover-img {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
font-size: 14px;
color: #FFF;
}
.img1 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img1:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5 {
background-size: 100% 100%;
background-repeat: no-repeat;
} 
.img5:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
#container {
width:960px;
margin: 0 auto;
}
.row {
display: flex;
}
.col {
display:inline-block;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}

HTML

<div id="container">
<div class="row">
    <div class="col">
        <div class="trigger vertical">
            <div tabindex="0" class="maincontent hover-img img"></div>
      </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img3"><span  class="step">Step</span> <span class="number">1</span></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"></div>
        </div>
    </div>
    <!-- </div>
 <div  class="row">-->
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"></div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img5"></div>
    </div>
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img6"></div>
    </div>
    <div class="trigger large">
        <div tabindex="0" class="maincontent hover-img img5"></div>
    </div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img1"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img2"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img3"></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"> </div>
</div>
</div>

Answer 1

如果这是一种不寻常的字体，您可能应该坚持使用图像。如果用户没有您在 CSS 中指定的字体，它将默认为丑陋的字体。是 - 您可以通过在 CSS3 中使用 @font-face 将字体嵌入到 CSS 中。但是您必须将您的站点限制为 CSS3 兼容的浏览器，并且仅使用 TTF/OTF 和 WOFF 字体。

div 中的样式化文本

Stylizing text within a div

html

css

text

text-styling