[
[返信する]]
【解決】ナノでのGoogle Fontsの使用方法
by しい
2016-02-14 22:16
Google Fontsに関しての記事を探してみたところ無かったので、投稿させていただきます。
サイトで使っている英字等のフォントを少し凝っている物に変えてみたいと思い探してみたところ、Google Fontsに辿り着きました。
しかし、使い方を見ても恥ずかしながら、<link href=……>をHEAD内に入れた後がよく理解できませんでした。
font-family:……はどのように入れればよいのでしょうか？
知識不足なのも承知ですが、ご教示ください。
pc
[編集]
by と
2016-02-14 23:28
ページ内の字体を反映させたい要素にCSSで指定してください。
例えばページ全体なら body{〜} の間です。
「字体」で検索
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=101
「font-family」で検索すると、たくさんスレが出てきますよ。他の方がどのように書いておられるか参考にしてみてください。
pc
[編集]
by しい
2016-02-15 00:55
ご丁寧な説明ありがとうございます。
教えていただいたスレとfont-familyで検索して得た情報で、参考にさせていただきました。
トップページのHEADに
<link href=……>
<style type="text/css">
body{
font-family: ……;
}
</style>
上記のものを入れてみて、（合っているのかはよく分からないのですが）ちゃんと反映されているのを確認できました。
しかし、これを入れたら明朝体だった日本語のフォントがゴシック体に変わってしまったのですが、明朝体に戻す場合font-family: ……,"ＭＳ Ｐ明朝";にすれば良いのでしょうか？
pc
[編集]
by と
2016-02-15 07:57
もともとそのwebフォントがゴシック体なのではありませんか？
font-family:'webfont名',sans-serif;
となっていませんか？(sans-serifはゴシック体の総称ファミリー名です)
日本語に対応していないwebフォントの場合、英数字をwebフォント、日本語を明朝体にするには、基本は
font-family:'webfont名',serif;
となります。serifとは明朝体の総称ファミリー名ですから、上記だとwebフォントに載っている文字はwebフォント、それ以外は(それぞれの端末に入っている標準の)明朝体で表示されます。
ただしwebフォントがゴシック体の場合、英数字はゴシック体、日本語は明朝体となりますし、環境によってwebフォントが反映されなかった場合は、英数字も明朝体となります。
上記の他、個別のフォント名(MS P明朝やメイリオ等)を入れる時は、serifやsans-serifより前に書きますが、フォントファミリーは書く順番も気をつけないといけないので、宜しければ総称ファミリー名の意味も併せまして、一度詳しく解説なさっているサイトをお訪ねになり、書き方の基本を覚えられるようお勧めします。
追記↓
解決されたようで良かったです。ひとつ気になったことがあるので追記致しました。
＞総称ファミリー名が無かったのです。
それなら日本語は端末のデフォルトのフォントになっていたということではないでしょうか。
pc
[編集]
by しい
2016-02-16 00:37
なぜか使ったフォントには最後に、総称ファミリー名が無かったのです。
とあるサイトで紹介されていたフォントを使ったのですが、なぜかGoogle Fontsのサイトでその紹介されていたフォントを検索しても見つからず…というようなことが起こったので、もしかしたらそのフォントがアップデートされなくなってしまったのかもしれません。（あまり詳しくないので適当な予測です…）
次回からは書き方の基本を覚えてから、フォントを凝った物に変えてみたいと思います。
ご丁寧に説明していただきありがとうございました。
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2016-02-14 22:16
pc
戻る
]