joppot

コピペで絶対動く。説明を妥協しない

プログラミング

Hiragino Sansフォントウェイトのcss書き方まとめ

投稿日：

このエントリーをはてなブックマークに追加

概要

みなさんこんにちはcandleです。今回はHiragino Sansのcssの書き方を紹介します。
Hiragino Sansの特徴はフォントの太さを1から9段階まで変えられることです。
一方で、Hiragino Sansのcssの書き方は様々あり、どの様に書いたら良いのかはっきりしなかったので、プログラムを書いて検証してみました。

今後、Hiragino Sansを利用する方に役立つと思います。

早見表はこちらに公開しました。

http://hiragino.joppot.info

前提

なし

SPONSORED LINK

Hiragino Sansのcssの書き方

検証した結論から書くと、この様に書くのが今のところ一番良い書き方です。 font-weightの100の値を300とか900など変更するとフォントの太さが変わります。

font-family: "Hiragino Sans"; 
font-weight: 100;

検証

事の発端はcssでHiragino Sansのフォントの太さ変更する書き方が様々あったことです。

そこでReactで簡単なプログラムを書いて、検証してみました。

検証したcssの書き方はこの５つです。

font-family: "HiraginoSans-W1";

font-family: "Hiragino Sans W1";

font-family: "Hiragino Sans";
font-weight: 100;

font-family: "HiraginoSans-W1";
font-weight: 100;

font-family: "Hiragino Sans W1";
font-weight: 100;

作成したコードはこれです。

これはReactで動いていますけど、CDNを使ってブラウザでコンパイルさせているので、誰でも保存してブラウザでひらけば、簡単に実行し、確認することができます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <style>
      .wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.content{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.fw1{font-weight:100}.fw1,.fw2{font-family:Hiragino Sans}.fw2{font-weight:200}.fw3{font-weight:300}.fw3,.fw4{font-family:Hiragino Sans}.fw4{font-weight:400}.fw5{font-weight:500}.fw5,.fw6{font-family:Hiragino Sans}.fw6{font-weight:600}.fw7{font-weight:700}.fw7,.fw8{font-family:Hiragino Sans}.fw8{font-weight:800}.fw9{font-family:Hiragino Sans;font-weight:900}.w1{font-family:HiraginoSans-W1}.w2{font-family:HiraginoSans-W2}.w3{font-family:HiraginoSans-W3}.w4{font-family:HiraginoSans-W4}.w5{font-family:HiraginoSans-W5}.w6{font-family:HiraginoSans-W6}.w7{font-family:HiraginoSans-W7}.w8{font-family:HiraginoSans-W8}.w9{font-family:HiraginoSans-W9}.fww1{font-family:HiraginoSans-W1;font-weight:100}.fww2{font-family:HiraginoSans-W2;font-weight:200}.fww3{font-family:HiraginoSans-W3;font-weight:300}.fww4{font-family:HiraginoSans-W4;font-weight:400}.fww5{font-family:HiraginoSans-W5;font-weight:500}.fww6{font-family:HiraginoSans-W6;font-weight:600}.fww7{font-family:HiraginoSans-W7;font-weight:700}.fww8{font-family:HiraginoSans-W8;font-weight:800}.fww9{font-family:HiraginoSans-W9;font-weight:900}.fwsw1{font-family:Hiragino Sans W1;font-weight:100}.fwsw2{font-family:Hiragino Sans W2;font-weight:200}.fwsw3{font-family:Hiragino Sans W3;font-weight:300}.fwsw4{font-family:Hiragino Sans W4;font-weight:400}.fwsw5{font-family:Hiragino Sans W5;font-weight:500}.fwsw6{font-family:Hiragino Sans W6;font-weight:600}.fwsw7{font-family:Hiragino Sans W7;font-weight:700}.fwsw8{font-family:Hiragino Sans W8;font-weight:800}.fwsw9{font-family:Hiragino Sans W9;font-weight:900}.sw1{font-family:Hiragino Sans W1}.sw2{font-family:Hiragino Sans W2}.sw3{font-family:Hiragino Sans W3}.sw4{font-family:Hiragino Sans W4}.sw5{font-family:Hiragino Sans W5}.sw6{font-family:Hiragino Sans W6}.sw7{font-family:Hiragino Sans W7}.sw8{font-family:Hiragino Sans W8}.sw9{font-family:Hiragino Sans W9}
    </style>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

  </head>
  <body>
    <div class="wrapper">
      <div class="content">
        <p>
          早見表
        </p>
      </div>
      <div class="content">
        <p>
          font-family: "HiraginoSans-W1";
        </p>
      </div>
      <div class="content">
        <p>
          font-family: "Hiragino Sans W1";
        </p>
      </div>
      <div class="content">
        <p>
          font-family: "Hiragino Sans"; <br/>
          font-weight: 100;
        </p>
      </div>
      <div class="content">
        <p>
          font-family: "Hiragino Sans W1"; <br/>
          font-weight: 100;
        </p>
      </div>
      <div class="content">
        <p>
          font-family: "HiraginoSans-W1"; <br/>
          font-weight: 100;
        </p>
      </div>
    </div>
    <div id="app"/>
    <script type="text/babel">
      class HiraginoList extends React.Component {

        render() {
          const num = [1,2,3,4,5,6,7,8,9]
          const browser = ["firefox","safari","chrome"]
          const score = [["X","X","O","O","X"],["O","O","O","O","O"],["O","X","O","X","O"]]
          return (
            <div>
              {score.map((val,index)=>(
                   <div className="wrapper">
                     <div className="content">
                       <p>
                         {browser[index]}
                       </p>
                     </div>

                     {val.map((val)=>(
                          <div className="content">
                            <p>
                              {val}
                            </p>
                          </div>
                        ))}
                   </div>
                 ))}


              {num.map((val) => (
                   <div className="wrapper" key={val}>
                     <div className="content">
                       <p>{val+"00W"}</p>
                     </div>
                     <div className="content">
                       <p className={"w"+val}>Hiraginoとヒラギノ</p>
                     </div>
                     <div className="content">
                       <p className={"sw"+val}>Hiraginoとヒラギノ</p>
                     </div>
                     <div className="content">
                       <p className={"fw"+val}>Hiraginoとヒラギノ</p>
                     </div>
                     <div className="content">
                       <p className={"fwsw"+val}>Hiraginoとヒラギノ</p>
                     </div>
                     <div className="content">
                       <p className={"fww"+val}>Hiraginoとヒラギノ</p>
                     </div>
                   </div>
                 ))}
            </div>
          )
        }
      }
      ReactDOM.render(<HiraginoList  />,document.getElementById('app'));
    </script>
  </body>
</html>

検証した環境はMacのSafariとFirefoxとGoogle Chromeです。

Safari

Safariでは全ての書き方でうまく機能しました。ただ、この書き方が一番うまくいっています。

font-family: "Hiragino Sans";
font-weight: 100;

Firefox

firefoxは２つの書き方だけ対応していました。

Google Chrome

Google Chromeは３つの書き方に対応していました。

まとめ

結論はやはりこの様に書くのが良いですね。私はMacでしか確認しませんでしたが、iPhoneやAndroid、Windowsでも試してみてください。

font-family: "Hiragino Sans"; 
font-weight: 100;

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者：

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Rails pluginを使ったgemの作り方[3]（vendor/assets 読み込み編）

概要 みなさんこんにちはcandleです。今回はgemでvendorを作成し、それをrailsアプリケーション側で読み込ませる為の方法を紹介します。 よく、gemをインストールすると「app/asse …

ruby on railsのckeditorをdeviseを用いて複数人で投稿できるようにする

概要 みなさんこんにちはcandleです。今回はckeditorの複数人投稿機能をdeviseを用いてやってみたいと思います。ckeditorを使うと分かると思うのですが、誰でも画像のアップロードや削 …

railsのgonで別ページでリロード後turbolinksで移動したら変数がundefindする場合の対処

概要 (追記 2016/05/18 この方法を行うと、turbolinksで問題が起きました。 turbolinksで移動した回数だけ、javascriptが実行されてしまいました。 例えば、 < % ...

Mysqlで今日以降の最も近い日付を取得する

概要 みなさんこんにちはcandleです。今回はmysqlで今日以降の最も近い日にちを取得する方法を紹介します。 ライブや、イベントなどで、今日から見て、最も近い日のデータを取得したみたいなことってあ …

scikit-learnの４つの関数で機械学習などのデータを前処理する

概要 皆んさんこんにちはcandleです。今回はpythonの機械学習ライブラリ『scikit-learn』を使い、データの前処理をしてみます。 scikit-learnでは変換器と呼ばれるものを使い …

PREV
react-lazyloadを使って画像を遅延ロードをする
NEXT
React webでreact-simple-formatを使う

スポンサードリンク

サイト内検索

翻訳

2018/12/15

wordpress gutenbergはmarkdown書けるよという話

2018/12/12

React WebでURLをaタグのリンクにして表示する

2018/12/10

javascript + Reactでhtmlタグの削除と許可とXSS対策

2018/12/07

React webでreact-simple-formatを使う

2018/12/05

Hiragino Sansフォントウェイトのcss書き方まとめ

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

最近のコメント

スポンサードリンク

アーカイブ

タグクラウド

apache Aptana studio 3 atom aws bash bogo CakePHP centos css docker ec2 emacs eslint fabric faker fluentd gem git import-js iphone javascript mac macports MAMP mysql nginx node php plantuml python rails react redmine ruby ruby on rails s3 ssl td-agent uml vagrant wordpress インストール ターミナル 正規表現 環境設定

スポンサードリンク