joppot

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

プログラミング

Hiragino Sans How to write to change weight in css

投稿日:


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.

http://hiragino.joppot.info

Condition

Nothing

SPONSORED LINK

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;

スポンサードリンク

If you think this article is good, share it please

-プログラミング
-,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

Customize wordpress bogo plugin’s short code

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you how to customize wordpress bogo short code. The items to introduce are these. The flag display or hide Change the text Related article How to change the language form “en-US” to “en” by wordpres bogo Precondition WordPress bogo has been installed You can edit the theme of wordpress

React Project development environment building command create-react-app is too convenient

English 日本語 Abstract Hello everyone It’s me candle. In this time we will build a “react” development environment with create-react-app command and try to hello world. Past react development was created by installing babel and other packages from npm on your own using gulp or webpack. Past react development installed babel and other packages from npm and built servers with gulp and webpack. If you use the create-react-app command, you can create react environment easily. Let’s do it. Precondition Node is already installed

Using sphinx how to generate documents of python classes and functions

Abstruct Hello everyone it’s me candle. In this article I will explain how to make documents about classes and functions with Sphinx automatically. condition I will explain it using Python 3, but I think that it will probably work with python 2 as well. Prepare test files Create a main.py and dog.py. touch main.py dog.py Write this to the main.py from dog import Dog def main(): dog = Dog() dog.show_name() if __name__ == "__main__": main() Open the dog.py and write it. class Dog(object): def __init__(self, name="bob"): self.name = name def bark(): print("Bow Wow") def show_name(self): print(self.name) def get_name(self): return self.name …

Ruby regex that does not match if there are keywords that you don’t want included in the string

Abstract Hello everyone it’s me candle. In this time I would like to create a regular expression that does not pass if keywords that I do not want included in the string match. This is such case like this. For example, the regex matches these words “Bitcoin” and “Bitcoin ~” but doesn’t match “BitcoinCash” and “Bitcoin Cash”. ○ Bitcoin ○ Bitcoin Core × BitcoinCash × Bitcoin Cash Condition Nothing Write the regex This is a regex that does not match if there are keywords that you do not want included in the string. /Keyword to include(?!Keywords you do not want …

Create plantUML with emacs using plantuml-mode

Autumn leaves on wood table Abstract Hello everyone it’s me candle. In this time, we will introduce plantuml-mode of emacs supporting plantUML. plantuml-mode has three functions. Syntax highlight Autocomplete Display UML preview There are plenty of settings, so let’s do it patiently. Precondition You had plantuml command I installed plantuml with brew. but it is ok you prepare jar file. If you don’t have it yet, please refer to here. Build PlantUML environment on Mac using brew Install plantuml-mode The latest version of plant-mode is not yet registered in el-get packages, so we will get it from github directly. For …


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.