質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3451閲覧

webフォントを使用して重いサイトを軽量化したい

korokorota

総合スコア40

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

3クリップ

投稿2016/07/12 03:19

今回初めてサイトでM+FONTSのwebフォントを使用しました。
見出しだけでなく、本文も全てM+FONTSを使用しています。

現在、ウェイトをthinからheavyまでの6種類使用しており
サイトがかなり重く表示が遅いので、
少しでも軽量化を図りたいと考えています。

しかし、使用カ所が多いため、サブセット化は向かないかと思っています。

そこで、例えば

css

1@font-face{ 2 font-family: 'mplus-2p-light'; 3 src: url('../fonts/mplus-2p-light.eot'); 4 src: url('../fonts/mplus-2p-light.eot?#iefix') format('embedded-opentype'), 5 url('../fonts/mplus-2p-light.woff') format('woff'), 6 url('../fonts/mplus-2p-light.ttf') format('truetype'); 7}

これに

css

1font-weight:bold;

を指定できたら、ウェイトを6種類から3種類に減らすことができるのではと考えたのですが、
指定してみても太字になりません。

このような指定は、効かないのでしょうか?
そもそも、webフォントの使用方法として間違っているのでしょうか?

他に何か軽量化できる方法がありますでしょうか?
何卒ご教授ください。よろしくお願い致します。

mondaminZ👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

font-weightの指定は、フォントが内包しているweightの中から、近いものを指定しています。なので複数weightが無いフォントは標準の状態で出力されます。

【font-weight - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight


使用カ所が多いため、サブセット化は向かないかと思っています。

JIS第一水準+英数字記号くらいであれば標準的な文章の場合問題なく表示されると思います。サイトによく出てくる単語についてはJIS第2水準に入っていないか確認し、それも入れておけばより安全でしょう。(ひらがなカタカナ英数字のみにして後述のLoaderで遅延読み込みでも良いとは思います)

【JIS第2水準の漢字一覧表】
http://kanjitisiki.com/jis2/

【Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io】
https://blog.jxck.io/entries/2016-03-14/web-font-noto-sans.html

【Noto Sans (源の角ゴシック) をWebフォントで使えるように軽量化する方法 | あなたのスイッチを押すブログ】
http://bamka.info/webfont-weight-saving


また、レギュラーフォント(一番多く使うフォントweight)のみサブセット化して、それ以外のweightについてはWebFont Loaderで遅延読み込みすることで体感スピードを上げる事も可能だと思います。

【Webフォントがいつ読み込まれたかを判断したい場合は、WebFont Loaderを使おう - W3Q】
http://w3q.jp/t/95

【Webサイト高速化のためのWebフォントとソーシャルボタンを遅延読み込みさせるすべらない話 | cherry-pick BLOG | 株式会社cherry-pick】
http://www.cherry-pick.jp/blog/web-design/speedy/webmt.php

投稿2016/07/12 04:43

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

korokorota

2016/07/13 03:38

早急にとても親切な回答いただき、ありがとうございます。 とても勉強になりました! サブセット化について、少し勘違いしているところがありました。 使用した文字だけサブセット化すると思っていたのですが、使用が予測される文字をまとめてサブセット化するのですね! 遅延読み込みも勉強になりました! 参照のリンクも載せていただき、とてもわかりやすかったです。 勉強になりました。 早速試してみたいと思います、本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問