どもども、久しぶりの晴天で遊びに行きたいのですが、仕事で缶詰状態なのが悔しいです。
さて、今回は仕事で初めて遭遇したバグに関して解決方法も含め簡単に備忘録にしておきます。
Mac book AirでSVGファイルのフォントが反映されない
まあ、タイトルのとおりなのですが、最近のwebサイトはレスポンシブ対応がマストということもあり、リキッドデザインが１つのトレンドでもあります。
また、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のみでしかこのような現象は確認できませんでしたが、他の端末でも同様の現象が起こる可能性もあるので、テキストは必ずアウトライン化しておいた方が無難ということです。てか基本ですよね！はい、すいません。。
ではでは、そんな感じで今回はここまで！また！