Abstract
Hello everyone it’s me candle. In this time I will show you how to write css of Hiragino Sans.The feature of Hiragino Sans is to be able to change the weight of font from 1 to 9 levels. On the other hand, there are various ways of writing css of Hiragino Sans and I did not know exactly how to write it, so I wrote a program and test it.
It will help you who will use Hiragino Sans.
The quick reference is released here.
Condition
Nothing
How to write css of Hiragino Sans
From the test conclusion, it is the best way to write like this for now.
You change the value of font-weight: 100; such as 300 or900 and it becomes to change the font weight.
font-family: "Hiragino Sans"; font-weight: 100;
validation
The reason I tried testing is there are various ways of writing to change the font weight of Hiragino Sans in css.
I wrote a simple program with React and tried it.
I tested these five writting of 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;
And this is the code.
It works with React, but I have compiled it with a browser using CDN, so if you save it and open it with a browser, You can easily executed and confirmed.
<!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>
The verified environment is Safari, Firefox and Google Chrome on Mac.
Safari
In Safari everything worked well.
Firefox
firefox supported only two ways of writing.
Google Chrome
Google Chrome supported three ways of writing.
Conclusion
As a conclusion, this writing style is the best.
I checked on Mac only, but please also try it on iPhone, Android, Windows.
font-family: "Hiragino Sans"; font-weight: 100;
