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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

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

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

2回答

2637閲覧

【webサイト】webフォント使い方がわからない Google Noto Fonts 【css】

nekomura

総合スコア132

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

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

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

1グッド

1クリップ

投稿2016/09/13 08:18

よろしくお願いいたします。

レスポンシブデザイン対応のwebページを作っています。
開発環境はEclipseの動的webプロジェクトです。

webフォントを利用するにあたって質問です。
実装にあたり、デザイナーからは以下のようにしたいといわれています。
●Noto Fonts
●太さは thin250
●見出しの太さは DemiLight350

そこで参考にしたサイトは下記なのですが、
Google Fontsの日本語フォント「Noto Fonts」の使い方
Noto Sans JapaneseをWebフォントとして使う方法

それらのサイトには、下記二点のような事がかかれています。

・自身のhtmlに以下のように記載する。

<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">

もしくは
cssファイルに以下のように記述し、

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); font-family: 'Noto Sans Japanese', sans-serif;<span class="s2"> </span>

と記述すれば使える…とあるのですが、その後どこにどのように上記を記述をすれば
・太さは thin250
・見出しの太さは DemiLight350
というように反映されるのでしょうか?

こちらに挙げた参考サイト2つ以外にも、様々な関連サイトを参考にしたのですがよくわかりません。
ZIPファイル(NotoSansCJKjp-hinted.zip)をダウンロードするページもあったのですが、これをダウンロードしてどうするのかが記載無く、分かりません。
eclipseのプロジェクトのフォルダなどに追加して読み込むとかするのでしょうか…???

先に進めず行き詰ってしまったので、
有職者の皆様、ご教示の程よろしくお願いいたします。

※webフォントについては本日初めて取り掛かるため、私の理解不足により本説明が
理解しにくい・文章が拙く追加の情報が必要…などございましたら併せてご指摘頂ければ幸いです。

act823👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

まずは仕組みからですね。

HTML

1<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">

が何をしているか考えてみましょう。
CSSファイルを読み込みんでいるものですよね。

では、どんなCSSが書かれているのかをURLを直接指定して眺めてみましょう。
@font-face という定義がいくつか書かれているはずです。

@font-face はWebフォントを読み込む指定です。
font-family という名前で使うべきWebフォントファイルの置かれている場所が書かれています。

Noto Sans の場合、同じ名前で別の font-weight となっているフォントファイルがいくつか用意されている、ということになります。


ここで一旦Webフォントから離れて、HTML+CSSでフォントを指定する方法を考えます。
例えば

HTML

1<div id="sample"></div>

とあった時、id="sample" の中で使われるフォントを指定するには、

CSS

1#sample { 2 font-family : フォント名; 3 font-weight: フォントの太さ; 4 font-size: フォントサイズ; 5}

のように指定するはずです。


上記の2点を組み合わせて、使いたい要素のCSSとして、font-family font-weight などを設定することで、Webフォントを利用できる、ということになります。

投稿2016/09/13 08:52

kaz.Suenaga

総合スコア2037

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

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

nekomura

2016/09/13 08:58

Suenaga様 いつもお世話になっております。 ご回答内容通りに落ち着いて進めてみたところ、無事に希望通りの結果となりました。 サイトではどうも分かりづらく行き詰ってしまったのですが、 とてもわかりやすいご回答でよく理解できました。 ありがとうございました!
kaz.Suenaga

2016/09/13 09:08

おまけですが、例えば「見出しの太さは DemiLight350」と言われて、h1 タグのCSSを DemiLight350 にしてしまうと、タグごとに設定する必要が出てきてしまうので、クラスとして font-weight 別に作っておいて <h1 class="NotoSans-350"> みたいにあてられるようにしておくと便利ですよ。
nekomura

2016/09/13 09:44

suenaga様 追記、ありがとうございます!! >h1 タグのCSSを DemiLight350 にしてしまうと、 思いっきりそのように記述していました…。 今はまだ問題ないので気づかなかったのですが、今後この書き方だとおっしゃるとおり面倒な事になりそうですよね。 実践的なアドバイス、とてもうれしいです。 助かりました、いつもありがとうございます!
guest

0

フォントの太さ指定はfont-weightくらいしかないので、ひとまずfont-weight: 250;としてみてデザイナーさんに見てもらって確認する感じですかね。

投稿2016/09/13 08:33

gin

総合スコア2722

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

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

gin

2016/09/13 08:43 編集

あ、でも50区切りというのは見かけたことないので、100区切りの「font-weight: 300;」ですね。
nekomura

2016/09/13 08:43

gin様 早々のご回答に感謝いたします。 デザイナーとしてはどの端末でも同一のフォントで表示できるように WEBフォントを使って欲しいというのが意図のようです。 webフォントを利用する流れがよく分からないので、もう少し調べてみます。 アドバイスありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問