SVGファイルの<text>タグでWeb Fontを指定する
2022/04/14 追記
OpenSeaのビューワだとこの記事の方式でフォントを指定しても反映されない模様。
外部からデータを取って来ることを制限されている。
<image>タグもOpenSeaでは正しく表示されなかった。残念。
フルオンチェーンのNFTを作ってたらtextタグのフォント指定で少し迷ったのでメモ。
以前NFTを作成した時はローカルのフォントを指定する形となっており、Windowsとそのフォントを標準搭載していないMac&iOSでは見え方が異なっていました。これがとても嫌だったので今回はWeb Font(Google Fonts)を利用します。
1.Google Fontで利用したいフォントを探す
2.SVGファイルの<defs>タグに貼り付けて編集する
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
<![CDATA[@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap");]]>
.cls-1{font-family: 'Noto Sans JP', sans-serif;}
</style>
</defs>
<text x="20" y="50" class="cls-1">テストテキスト123456789abdce</text>
</svg>
1.で取得した<style>タグのコードを<defs>タグ内に貼り付けます。
ここで注意すべきなのが、@import ～ );の部分を <![CDATA[ ～ ]]>でくくってあげること。
これがないとSVG構文エラーが発生します。
あとは1のCSS rules to specify familiesのコードを好きなクラスのCSS定義に貼り付ける。
そして<text>タグにクラスを割り当てれば無事Web Fontが反映されます。
ブラウザで表示するとこんな感じ
Author And Source
この問題について(SVGファイルの<text>タグでWeb Fontを指定する), 我々は、より多くの情報をここで見つけました https://zenn.dev/ytenden/articles/24ba3729f3b8e6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol