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

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

[Qiita記事のOGPイメージが新しくなりました - Qiita Blog](https://blog.qiita.com/qiita-article-ogp-renewal/)
![20191219T023852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/65ff322c-78ee-6c20-4d16-539add305a1c.png)


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

![!6CFC683C__e6af86e9-ab26-d942-a90b-b68500459f77_m1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/391bfe7e-3923-f8de-88bb-7c35c615d1d2.png)

Qiita Blogによると、imgixの[Multi-line Text & Overlays](https://docs.imgix.com/tutorials/multiline-text-overlays-typesetting-endpoint)を使って実装しているそうですが、imgixには日本語用のフォントが用意されておらず、lang属性も指定できません。そのためデフォルトでいわゆる中華フォントになってしまっているようです。

imgixのSandbox環境で日本語の文字列を打ち込んでみると、同様の表示になることが確認できます。
![20191219T015452.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/eb16e7df-fc9a-aa9a-7815-31dcbef94a02.png)

# 回避するには？
Qiita Blogでのアナウンスのとおり、OGP画像を使用しないという設定はできません。
> 全ての記事に新しいOGPイメージが適用され、個別に旧タイプへ戻すことはできません。

ただしバグっぽい挙動として、波ダッシュ(〜)の直後は太字になり、さらに日本語フォントが使われるようです。
以下のページでは【前編】の部分だけ太字＆日本語フォントになっています。
※全角チルダ(～)ではこうなりませんでした。
![20191219T012121.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/d5b183d3-6167-65d8-0f22-720afbd629ea.png)
https://twitter.com/Qiita/status/1191218545981624321

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

# 中華フォントの発生例
以下はTwitterで見つけた違和感の大きいOGP画像の例です。（いずれも2019年12月19日時点）

![20191219T010737_m1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/3aae49be-bc78-71b0-7d71-0f8a0267c129.png)
https://twitter.com/Qiita/status/1198889085504503813

![20191219T010405_m1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/45efdcc5-6939-dcf0-a454-e431ca5088c2.png)
https://twitter.com/Qiita/status/1206416177280552960

![20191219T010308_m1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/03e6812a-4484-a0a5-3aaf-b8b9b6634dc4.png)
https://twitter.com/Qiita/status/1205412172748247040

![20191219T012635_m1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/eb816149-8d19-d2d0-b04c-52b5b6d50d0b.png)
https://twitter.com/Qiita/status/1199175957682237442

![20191219T012549_m1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/de7b2064-b601-07ae-2171-b18cb5b3543d.png)
https://twitter.com/Qiita/status/1200278212821049344

![20191219T012417_m1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/3a760d41-6feb-56ad-9793-2ebbf7044967.png)
https://twitter.com/Qiita/status/1204596713752801283

![20191219T012343_m1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177071/c1408c1b-7e4c-09a6-36b0-e6169105121b.jpeg)
https://twitter.com/Qiita/status/1204641987842002944

# 関連ページ
- [Qiita記事のOGPイメージが新しくなりました - Qiita Blog](https://blog.qiita.com/qiita-article-ogp-renewal/)
- [OGP画像を設定してみよう！](https://qiita.com/marietty123/items/532b11315fa10f4f23a7)
- [【メモ】Android ChromeでQiitaを見ると中華フォントになる件について（、そしてlang属性の要不要）](https://qiita.com/honey32/items/0b7c3e40d4203c1f4b8c)
- [iOS で日本語文章に発生する中華フォント現象とは](https://qiita.com/usagimaru/items/46c27c42e862fb8aba7e)

# 引用ページ
- [DFS (深さ優先探索) 超入門！ 〜 グラフ・アルゴリズムの世界への入口 〜【前編】](https://qiita.com/drken/items/4a7869c5e304883f539b)
- [Python3インストール（Mac編）](https://qiita.com/ms-rock/items/72b8f1abc661c539bb09)
- [peer認証の関係でpsqlログインできない時の対処法](https://qiita.com/tomlla/items/9fa2feab1b9bd8749584)
- [Rails環境でJS , CSSをwebpackで完全に管理する](https://qiita.com/geek_shanshan/items/8f348734d95d9ece9576)
- [エラー監視時(set -e)の汎用トラップコード(trap)](https://qiita.com/kobake@github/items/8d14f42ef5f36d4b80e4)
- [メルセンヌツイスタはそんなに衝突しない](https://qiita.com/blackenedgold/items/52da300456b1e6e1365a)
- [ディープラーニングの様々なモデルを使ってCIFAR-10画像データセットの分類を行う](https://qiita.com/dsanno/items/ad84f078520f9c9c3ed1)
- [数学得意じゃない系の社会人エンジニアに競プロとAtCoderを全力で布教したい。あるいは競プロのよくある誤解と楽しむコツ](https://qiita.com/kirimin/items/598166d28093d0251d89)