サイトやWordPressでAAを表示させる方法

AAが表示できるサイトを作りたい!
しかしAAは決まった表示でないとズレます。

MS Pゴシック 16ピクセル 行間2ドット

この16ピクセルというのは12ポイント同じですが、
12ポイントの表記だと環境によってズレてしまうことがあるので16ピクセル推奨です。

AAをズレないようにするにはCSSに下記をコピペすればOKです。
WordPressの場合、
外観>テーマエディター>style.css
ここですね。

@font-face {
font-family: "Saitamaar";
src: url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.woff2") format("woff2"),
url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.woff") format("woff"),
url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.ttf") format("ttf");
font-display: swap;
}

.entry-content {
font-family: 'Saitamaar', 'MS Pゴシック', 'MS PGothic', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
letter-spacing: 0;
line-height: 18px;
overflow: auto;
white-space: nowrap;
}

AAの表記は「MS Pゴシック」と書きましたが、
「Saitamaar」というとても軽いWebフォントがあるのでそれを導入・利用しています。
entry-contentという部分はテーマによって違うことがあるので要確認です。

ところで私はWordPressの「ystandard」というテーマを使っていますが
entry-contentの部分は変わらないのにAAがうまく表示されませんでした。
解決しましたのでメモします。
外観>カスタマイズ>追加CSS
の中に上記のCSSをコピペすることで解決しました。

また自動改行などをphpで設定しましたが、こちらのサイトを参考にさせていただきました。



ただAAを使わないときの表示も用意しておきたいという場合は
CSSに下記を加えて、

.notaa {
font-family:"ヒラギノ 角ゴ","メイリオ",sans-serif;
}

.notaa {
font-size: 16px;
color: #111;
margin-bottom: 2em;
line-height: 1.7;
}


文章をdiv classで囲めば普通の文章になります。

<div class="notaa">ここに文章</div>


でもそれならentry-contentをaaに変えて

<div class="aa">ここにAA</div>

このほうがいいかもしれません。