in between days

表参道で働くシニアのブログ

macOSのバージョンを上げたらTwitterがOsakaで表示されるようになったからユーザースタイルを当ててなんとかした

kyoto-nagoya.hatenablog.com

おそらくこの案件に関連してだとおもうんですが、フォントとOSの関係についてはよくわかってないのでここでは置きます。

f:id:mohri:20191017120304p:plain

https://twitter.com/ayakawada/status/1156882648729391105

とにかくmacOSをアップデートしてCatalinaにしたら、ChromeでTwitterがこんなかんじに表示されるようになった。文字がやたらくっついてて読みづらい。開発ツールで見たら「Osaka」が選択されてる。

.r-gwet1z {
    font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

こういうスタイルがあたってて「ヒラギノ角ゴ Pro」がないので、その次の「Osaka」が効いてるっぽい。

配信されてるCSSを上書きしたいので、ブラウザ側の拡張でなんとかする。

chrome.google.com

chrome.google.com

ユーザースタイルとか久しく当ててないので拡張も入れ直す。検索して出てきた下のを使ってみたが、たぶん上のが定番。

.r-gwet1z {
    font-family: Arial,"Hiragino Sans", sans-serif;
}

ちょっと試行錯誤して「twitter.com」に対してこのスタイルを当てた。ブラウザの設定でsans-serifを「ヒラギノ角ゴシック」にしてれば「Hiragino Sans」も不要そう。

f:id:mohri:20191017121532p:plain

https://twitter.com/ayakawada/status/1156882648729391105

読みやすくなった。あやちょサイコー!