IE非対応のCSSグラデーションを文字にかける2つの方法（画像・SVG）

IEで文字にグラデーションをかけようとするとこのようになります。

文字の背景に色がついてしまうんですね。

デザインの関係などで、IEでも文字にグラデーションをかけたいときがあるかと思います。
以下のようにしたので参考にしてみてください。
画像や幅指定などおこなうので、文字数や文字サイズが決まっているときのみにおすすめです。

Contents

1. デモページ
2. 通常のグラデーションのかけ方
3. IE対策1．IEのみ文字色を透明にして背景画像を設定する
4. IE対策2．SVGスプライトをつかう

デモページ

demo

通常のグラデーションのかけ方

1. 1．backgroundでグラデーションの背景を指定する
2. 2．-webkit-background-clip: text;でbackgroundがテキストで切り抜かれるようにする
3. 3．-webkit-text-fill-color: transparent;で文字を透明にして、backgroundの色が出るようにする

CSS

IEですと単色になってしまいグラデーションになりません。

IE対策1．IEのみ文字色を透明にして背景画像を設定する

テキストを画像化するので動的なテキストには向いていません。
決め打ちの見出しなどに向いています。

1. 1．テキストを画像化する
2. 2．JavaScriptでブラウザを判別しhtmlにclassを追加する
3. 3．IE時はcolor: transparentで文字を透過して、backgroundが見えるようにする

テキストを画像化する

今回はテスト用に作成しましたが、PSDやAIなどWebデザインのデータがあれば、そこから画像で描きだします。

ブラウザを判定をするJavaScriptを読み込む

IE時のみ特定のCSSを追加したいので、ブラウザを判定してくれるJavaScriptを読み込みます。
こちらの記事などがとても参考になります。

userAgentでブラウザ＆デバイス判別 2017年版（Qiita）

これでIEブラウザでは「ie」というクラスがでるようになります。

IE時は文字を透過して、backgroundが見えるようにする

画像化したテキストをタイトルの背景に設置します。
IE時のみcolor: transparentで文字を透明にすると、背景のテキスト画像が見えるようになります。

CSS

background-sizeで微調整が可能です。

テキストをドラッグで選択できます。

このやり方をしたサイト：暦学堂（COMPANY、RECRUIT見出し箇所）

IE対策2．SVGスプライトをつかう

スタイルを変更できるSVGスプライトをつかいます。
色やサイズの変更はできますが、ひとつひとつ表示範囲をwidth、height指定する必要があるので、こちらも動的なテキストには向いていません。

「Point」や「Step」といった、変わることのない見出しなどに向いているかと思います。

1. 1．SVGのスプライトファイル（フィルタとグラデーション要素）を記述する
2. 2．SVGのText要素を書く
3. 3．CSSでサイズとグラデーションを指定する

SVGのスプライトファイル（フィルタとグラデーション要素）を書く

bodyや/body直下などにSVGのスプライトファイル（フィルタとグラデーション要素）を記述しておきます。
IDを指定し、offset属性で位置を、stop-color属性で色を指定します。

HTML

SVGのText要素でテキストを記述する

x=”0″ y=”100%”で表示する場所を微調整できます。

HTML

CSSでサイズとグラデーションを指定する

通常のCSSと同じようにフォントサイズをここで決定します。
また、SVGの背景をfillで指定します。さきほどlinearGradientで決めたIDを記述すればOKです。

表示範囲をwidth、heightで指定します。

HTML

まとめ

幅や高さを指定する必要があるため、文字数や文字サイズが決まっているときに使いやすいかと思います。
フォントを変えずにグラデーション対応ができるので、よかったら参考にしてみてください。