このページについて

このページは、テキストの縁取りのテストページです。条件は以下の通りです。

こういったケースで、各種の指定でどのように表示されるかを検証します。検証は2020/6/11時点のものです。

ちなみに、ブラウザは

で確認しました。

text-shadowで上下左右に1pxずつずらす

            
.c-eyecatch_textShadowCopy {
    color: rgba($main-color, 0.6);
    text-shadow: 1px 1px 0 $main-color,-1px 1px 0 $main-color,1px -1px 0 $main-color,-1px -1px 0 $main-color;
}

で文字色とtext-shadowを指定した場合。

Ghastly Dream

文字色と枠線の色が同化してしまいました……。

text-stroke


.c-eyecatch_textStrokeCopy {
    color: rgba($main-color, 0.6);
    -webkit-text-stroke: 1px $main-color;
}

で指定しました。

Ghastly Dream

動作的に問題なさそう(Firefox含めて)です。

ただし、text-stroke: 1px $main-color;ではダメで、ベンダープレフィックスを付けないと動作しません(Chrome含めて)でした。よって次点。

svgを使用する


.c-eyecatch_svgCopy {
    svg {
        width: 100%;
        height: auto;
        overflow: visible;
    }
    text {
        fill: rgba($main-color, 0.6);
        stroke: $main-color;
        stroke: {
            width: 1;
            linejoin: round;
        }
    }
}

cssのみではなくsvgの力も借りるパターン。

Ghastly Dream

svg特有の記述はあるものの、それさえこなせばこれが一番綺麗そうです。

※x="50%" y="50%" text-anchor="middle" dominant-baseline="central"の指定がないとFirefoxだけ横方向中央に揃わなかったりしました。

参考