【HTML/CSS】文字・フォントの装飾/カスタマイズ方法一覧[コピペ可]

<p class="t8-font-5"><i>サンプル</i></p>

<p class="t8-font-6">サンプル</p>

.t8-font-6{
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;　
}

<p class="t8-font-7"><span>サンプル</span></p>

.t8-font-7 span{
    border-bottom: 3px solid #0d6efd;
}

<p class="t8-font-8"><span>サンプル</span></p>

.t8-font-8 span{
    text-decolation: #0d6efd wavy underline;
}

<p class="t8-font-9"><span>サンプル</span></p>

.t8-font-9 span{
    border-bottom: 3px dashed #0d6efd;
}

<p class="t8-font-10"><span>サンプル</span></p>

.t8-font-10 span{
    border-bottom: 3px dotted #0d6efd;
}

<p class="t8-font-11"><span>サンプル</span></p>

.t8-font-11 span{
    border-bottom: 6px double #0d6efd;
}

<p class="t8-font-12">サンプル</p>

.t8-font-12{
     text-decoration: line-through;
}

<p class="t8-font-13"><span>サンプル</span></p>

.t8-font-13 span{
    background: linear-gradient(transparent 70%, #0d6efd 0%);
}

<p class="t8-font-14"><span>サンプル</span></p>

.t8-font-14 span{
    background: #0d6efd;
}

<p class="t8-font-15">サンプル</p>

.t8-font-15{
    text-shadow: 1px 1px 3px silver;
}

<p class="t8-font-16"><ruby>サンプル<rt>さんぷる</rt><ruby></p>

<p class="t8-font-17">サンプル<sup>さんぷる</sup></p>

<p class="t8-font-18">サンプル<sub>さんぷる</sub></p>

<p class="t8-font-18">サンプル<sub>さんぷる</sub></p>

<p class="t8-text-19">サンプル</p>

.t8-text-19{
    letter-spacing: 1em;
}

<p class="t8-text-20">一行目サンプル</br>二行目サンプル</p>

.t8-text-20{
    line-height: 3;
}

<p class="t8-text-21">サンプル</p>

.t8-text-21{
    text-align:center;
}

<p class="t8-text22">サンプル</p>

.t8-text-22{
    float: left;
}

<p class="t8-text-23">サンプル</p>

.t8-text-23{
    transform: scaleX(-1);
}

<p class="t8-text-24">サンプル</p>

.t8-text-24{
    -webkit-writing-mode:vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

<p class="t8-font-25"><!-- コメントアウト --></p>