23
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Qiita記事の新しいOGP画像が中華フォントな件

Last updated at Posted at 2019-12-18

中華フォント

TwitterにQiitaのURLを貼った際、大きな画像が表示されるようになりましたね。これはOGP画像と呼ばれるものです。

Qiita記事のOGPイメージが新しくなりました - Qiita Blog
20191219T023852.png

……ん?
漢字が少し変ですね?
Noto Sans CJK JPと比較してみましょう。

!6CFC683C__e6af86e9-ab26-d942-a90b-b68500459f77_m1.png

Qiita Blogによると、imgixのMulti-line Text & Overlaysを使って実装しているそうですが、imgixには日本語用のフォントが用意されておらず、lang属性も指定できません。そのためデフォルトでいわゆる中華フォントになってしまっているようです。

imgixのSandbox環境で日本語の文字列を打ち込んでみると、同様の表示になることが確認できます。
20191219T015452.png

回避するには?

Qiita Blogでのアナウンスのとおり、OGP画像を使用しないという設定はできません。

全ての記事に新しいOGPイメージが適用され、個別に旧タイプへ戻すことはできません。

ただしバグっぽい挙動として、波ダッシュ(〜)の直後は太字になり、さらに日本語フォントが使われるようです。
以下のページでは【前編】の部分だけ太字&日本語フォントになっています。
※全角チルダ(~)ではこうなりませんでした。
20191219T012121.png
https://twitter.com/Qiita/status/1191218545981624321

つまり、「〜記事のタイトル」のように波ダッシュの後に全角文字だけでタイトルを書けば、一応は中華フォントを回避できます。

中華フォントの発生例

以下はTwitterで見つけた違和感の大きいOGP画像の例です。(いずれも2019年12月19日時点)

20191219T010737_m1.png
https://twitter.com/Qiita/status/1198889085504503813

20191219T010405_m1.png
https://twitter.com/Qiita/status/1206416177280552960

20191219T010308_m1.png
https://twitter.com/Qiita/status/1205412172748247040

20191219T012635_m1.png
https://twitter.com/Qiita/status/1199175957682237442

20191219T012549_m1.png
https://twitter.com/Qiita/status/1200278212821049344

20191219T012417_m1.png
https://twitter.com/Qiita/status/1204596713752801283

20191219T012343_m1.jpg
https://twitter.com/Qiita/status/1204641987842002944

関連ページ

引用ページ

23
13
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
23
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?