M PLUS Rounded 1cが汚いけどCSS追記でキレイに表示させる
Google Fontsの日本語フォントにある『M PLUS Rounded 1c』。
これが何故だかガクガクして乱れて表示されてしまいます。
所謂ジャギーと呼ばれる状態です。
『おれの名をいってみろ』の名ゼリフはジャギ様ですが、関連性はありません。
この乱れた状態は、ある程度大きいフォントサイズだとキレイに表示されるので、20px以下のサイズ限定に発生する様です。
では実験です。
フォントサイズ21pxで指定
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
↑キレイに表示されます。
21px以上の場合は問題ありません。
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
↑太字もキレイに表示されます。
フォントサイズ20pxで指定
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
↑乱れて表示されます。
フォントサイズ16pxで指定
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
↑同じく乱れて表示されます。
追記するコード
とまぁ、20px以下だと明らかにギザギザハートの子守歌なのですが、これを1行CSS追記してキレイに出来ます。
コードは下記の通りです。
transform:rotateZ(0.03deg);下記のコードでも等価となります。
transform:rotate(0.03deg);追記した状態は下記の通りです。
フォントサイズ20pxで↑を追記
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
↑キレイに表示されます。
フォントサイズ16pxで↑を追記
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
または実はお丁より云うのはこれから駄目と得ですば、そんな文芸がはありあわせずからにおいて他がなりているたで。その限り状態のためその絵もそれ上から帰るでかと嘉納さんを閉じ込めうな、信念の今あっってご使用だなけれなで、根本のところが味に今などの手段が今日あるばくるて、いっその十月をいうてそのためをなおあるですでとなっますのですば、淋しなですてわざわざご金力するだっ方なくまします。そこで足か横着か運動が困りありば、ほか上権力を込んてならた末にご話の当時が起っうない。十一月がはよほどするから閉じ込めたますなずで、よほどもし思いてお話しは少しないませ訳でしょ。
↑キレイに表示されます。
まとめ
とまぁ明らかに見た目はキレイになるので、20px以下で『M PLUS Rounded 1c』を使うならこの指定は外せません。
『M PLUS Rounded 1c』を使うなら
transform:rotateZ(0.03deg);もしくは
transform:rotate(0.03deg);をセットで使いましょう。
あっ、
ちなみに『M PLUS 1p』でも同じ様にジャギるので、↑のコードを追記すれば改善されます。
-追記-
bodyタグに『M PLUS Rounded 1c』を使用している場合は、bodyタグに上記CSS適応させても駄目です。
その場合はコンテンツのdivタグなど個別に適応させる必要があります。
