今回の不具合
XDから書き出したSVG画像をサイトで使用して確認していると、
PCの検証ツールでのスマホ表示はうまくいっているのに、
実機で確認するとフォントがおかしく崩れている現象が発生した・・
デザインで使用されているフォントがパソコンやスマホに存在しない場合、
そのユーザーの環境に応じて代替フォントに自動的に置き換わる
これにより、今回のように実際のXDとの見え方と異なるという不具合が発生する
解決策：アウトライン化してからSVGに書き出す
アウトライン化とは
文字情報からオブジェクトパスへ変換すること
これにより、端末の環境に依存してデザインが変わるということが防げる
方法は、フォントを選択した状態で、command + 8 を押すだけ
もしくは、上部固定メニューの「オブジェクト」> 「パス」 > 「パスに変換」
これで正常に画像が表示された
\ 案件のご依頼・ご相談はこちらから /
XDで書き出したSVG画像をサイトで表示させてみると、
フォントが違う...もしや指定フォントが見つからない...？