css 【旧内容】现状でGoogleフォントで字体显示プロパティを并用する方法font-display：swap【适応済み】

Posted 2021-05-13

# 【旧内容】現状でGoogle フォントでfont-displayプロパティを併用する方法　font-display: swap【適応済み】


Google Fontsを使う場合は display パラメータが使えるようになりました

※ IE非対応
https://blog.ikunaga0.com/google-fonts-is-beginning-support-font-display-swap/

https://liginc.co.jp/441102


font-display: swap
------------------


A [Pen](https://codepen.io/lig-dsktschy/pen/wQZpQX) by [ligdsktschy](https://codepen.io/lig-dsktschy) on [CodePen](https://codepen.io).

[License](https://codepen.io/lig-dsktschy/pen/wQZpQX/license).

<!-- 本来はheadタグ内、もしくはbodyタグ内の末尾に記述する -->
<script>
url = 'https://fonts.googleapis.com/css?family=Noto+Sans+JP'
xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.onreadystatechange = function () {
  if (xhr.readyState !== 4 || xhr.status !== 200) return
  var style
  style = document.createElement('style')
  style.innerHTML = xhr.responseText.replace(/}/g, 'font-display: swap; }')
  document.head.appendChild(style)
}
xhr.send()
</script>

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 30px;
}