概要
みなさんこんにちはcandleです。今回はHiragino Sansのcssの書き方を紹介します。
Hiragino Sansの特徴はフォントの太さを1から9段階まで変えられることです。
一方で、Hiragino Sansのcssの書き方は様々あり、どの様に書いたら良いのかはっきりしなかったので、プログラムを書いて検証してみました。
今後、Hiragino Sansを利用する方に役立つと思います。
早見表はこちらに公開しました。
前提
なし
Hiragino Sansのcssの書き方
検証した結論から書くと、この様に書くのが今のところ一番良い書き方です。 font-weight
の100
の値を300
とか900
など変更するとフォントの太さが変わります。
font-family: "Hiragino Sans"; font-weight: 100;
検証
事の発端はcssでHiragino Sansのフォントの太さ変更する書き方が様々あったことです。
そこでReactで簡単なプログラムを書いて、検証してみました。
検証したcssの書き方はこの5つです。
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は2つの書き方だけ対応していました。
Google Chrome
Google Chromeは3つの書き方に対応していました。
まとめ
結論はやはりこの様に書くのが良いですね。私はMacでしか確認しませんでしたが、iPhoneやAndroid、Windowsでも試してみてください。
font-family: "Hiragino Sans"; font-weight: 100;