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

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

ただいまの
回答率

91.36%

  • CSS

    3871questions

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

  • Google

    355questions

    Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

  • font

    64questions

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

Noto Sans Japanese について、一部の漢字が若干の太字で表示されてしまう。

解決済

回答 1

投稿 2017/11/22 10:49

  • 評価
  • クリップ 0
  • VIEW 61

mizutama72

score 14

Noto Sans Japaneseを使用して開発しています。

styleタグ

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gudea" >

cssファイル

    font-family: 'Noto Sans Japanese','Gudea';
    font-weight: normal;
    font-weight: 100;

上記のように設定していますが、一部の漢字が若干太く表示されてしまいます。
以下の場合でしたら、項目の「目」、表示の「示す」。
解消方法をご存知の方がいましたら、ご教授願います。

イメージ説明

イメージ説明

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/11/22 11:48

    見た感じ、ひらがな・漢字関係なく交差する線が少し強調表示される書体のようですね。thinに限らず強調表示されているように見えます。

    キャンセル

  • shimitei

    2017/11/22 12:21

    私の場合はWindowsで見ると違和感がなく、Macで見ると若干気になります。どのようなOS、ブラウザでの表示でしょうか?

    キャンセル

  • mizutama72

    2017/11/22 13:57

    ご回答ありがとうございます。こちらはOSはMac、ブラウザはChromeです。Windowsでは違和感ないのですね。参考になりました。

    キャンセル

回答 1

checkベストアンサー

+2

Noto Sans JapaneseとMacの組み合わせでも、次の指定を付けるとあまり気にならない表示になります。

body {
  -webkit-font-smoothing: antialiased;
}

他には、高解像度環境かどうかでも見え方が異なるかもしれません。
font-smoothingでOSXでのフォントのレンダリング方法を調整する - Qiitaから、Webブラウザにおける文字のアンチエイリアスの現状の最適解のページが参考になりそうです。

投稿 2017/11/22 14:30

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/22 16:14

    ご回答ありがとうございます。
    -webkit-font-smoothing: antialiased; を設定してみたのですが、全体的にうすくなり、やはり一部の文字が太く見えました。
    font-weightが100ですと、上記のようになってしまうようなので、font-weightを300にして、-webkit-font-smoothing: antialiased; を設定しましたら、目立たなくなりました。

    教えていただいたQiitaのページを読んでみようと思います。ありがとうございました。

    キャンセル

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

ただいまの回答率

91.36%

関連した質問

  • 受付中

    データバインド(DHTML)でデータを正常表示できる方法を教えてください。

    以前ウィンドウズXP環境で、DHTMLのデータバインドを良く使っていたのですが、 最近見たらデーター部分が非表示になってしまい見ることができません。 ActiveX関連のセキュリテ

  • 受付中

    適切なイベントがわからない。

    前提・実現したいこと imgタグで表示されているアイコンをクリックした後で、ポップアップされるdatepickerの表示崩れを修正したいです。 datepicker内のtabl

  • 解決済

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

    よろしくお願いいたします。 レスポンシブデザイン対応のwebページを作っています。 開発環境はEclipseの動的webプロジェクトです。 webフォントを利用するに

  • 解決済

    monaca ons-modalのincludeを行いたい

    前提・実現したいこと 現在、monaca(2.0.0-rc.1)を利用してアプリを開発中、angularjs(1.4.3)を利用しています。 ファイルの管理上、ons-moda

  • 解決済

    web font (google fonts)が勝手に斜体になる...

    ATOMでホームページを作っています。素人です。 web font(google fontsにもある) Josefin sans を使いたく以下のように組んだのですが、なぜか

  • 解決済

    HTMLCSSの表の改行に関すること

    今、HTMLとCSSを用いて、<オプション>の炭酸シャンプーと[300円(税込) 頭皮を直接刺激してあげることで、根本から従来のハリとツヤを取り戻せます。 ]の行の部分の作成をして

  • 解決済

    コメント時に文字の背景色を変更する

    プログラミングの初心者です。 写真のように文字を赤色に、文字の背景色をグレーに設定するにはどうすればいいのでしょうか? ```で囲んでみたのですがうまくいかないです。

  • 解決済

    背景が表示されない

    いろいろエラーチェックしたのですが、背景色が表示されません。宜しくお願い致します。styles.cssがないのでそこが原因だと思うのですが f12で表示して詳細を見ると

同じタグがついた質問を見る

  • CSS

    3871questions

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

  • Google

    355questions

    Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

  • font

    64questions

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