kkktttmmmrrr
3/28/2019 - 5:56 PM

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

【旧内容】現状で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 by ligdsktschy on CodePen.

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;
}