LoginSignup
5
2

More than 5 years have passed since last update.

なぜかSVG画像だけがiPhoneのSafariで明朝体になる時にやったこと

Posted at

CSSで<body>タグに対してサンセリフ体(sans-serif)をかけているのに、
SVGアイコンの「メニュー」の文字だけ明朝体になって困った。

Screen-Shot-mincho.png

SVG画像に対して、

img {
    font-family: sans-serif;
}

をかけてもダメだった。

結局どうしたか

SVGをエディターで開いてSVGのソースコードをみたら、以下のfont-family="YuGo-Bold, YuGothic"の記述があったので、

    <text id="メニュー" transform="translate(334 60)" font-size="8" font-family="YuGo-Bold, YuGothic" font-weight="700"><tspan x="-16" y="0">メニュー</tspan></text>

以下のようにfont-family指定font-family="sans-serif"を編集したら、ちゃんとサンセリフ体になった!

    <text id="メニュー" transform="translate(334 60)" font-size="8" font-family="sans-serif" font-weight="700"><tspan x="-16" y="0">メニュー</tspan></text>

Screen-Shot-san-serif.png

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2