Mac Book Airでsvgファイル(テキスト)のフォントが違う件

 どもども、久しぶりの晴天で遊びに行きたいのですが、仕事で缶詰状態なのが悔しいです。

 さて、今回は仕事で初めて遭遇したバグに関して解決方法も含め簡単に備忘録にしておきます。

Mac book AirでSVGファイルのフォントが反映されない

 まあ、タイトルのとおりなのですが、最近のwebサイトはレスポンシブ対応がマストということもあり、リキッドデザインが1つのトレンドでもあります。

 また、MacやiPhoneをはじめとしたretinaディスプレイ端末も多くなってきたことで、デバイスによってはjpgやpng等の画像だとボケたりすることもありますよね。そこで役に立つのがsvgで僕も結構使うことが多いのですが、svgファイルを利用していく中で先日初めて遭遇したバグというか仕様にぶち当たりました。

 そのバグというのが、タイトルのとおりMac Book Airで見たときにsvgデータのフォントが反映されていないという問題です。iMacやiPhone、Windows端末では思い通りのフォントが表示されているし、フォトショップ等で開いてもちゃんと指定したフォントスタイルで表示されているのですが、Mac Book Airでみた時のみなぜか別のフォントスタイルになっていたんですね。。謎。。

解決方法

 この意味不明なバグの解決に小一時間ハマったのですが、原因は至極単純なことでした。

 そのバグが発生したケースは、XDデータからsvgファイルを書き出していたのですが、その元のデータがアウトライン化されていないということが原因でした。

 XDファイルからイラレにコピペしてアウトライン化して書き出したら、Mac Book Airでも正常に表示されましたとさ。

 つまり、テキストデータをsvg化して使用したいときは必ずアウトライン化しましょうねということです。ただ、それだけです。

まとめ

 というわけで、こんなバグに小一時間苦しめられた自分のような情けない思いをする方も、もしかしたらいるかもしれないので一応備忘録も兼ねて記事にしてみました。

 ちなみに、今回はMac Book Airのみでしかこのような現象は確認できませんでしたが、他の端末でも同様の現象が起こる可能性もあるので、テキストは必ずアウトライン化しておいた方が無難ということです。てか基本ですよね!はい、すいません。。

 ではでは、そんな感じで今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

シェアありがとうございます!

タグ
web

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です