Created
June 25, 2019 17:38
「Google Fonts + 日本語」を @font-face でHTMLに取り込んで使ってみるテスツ
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style type="text/css"> | |
| @font-face { | |
| font-family: 'Nico Moji Hoge'; | |
| font-style: normal; | |
| font-weight: 400; | |
| src: url(http://fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.eot); | |
| src: url(http://fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.eot?#iefix) format('embedded-opentype'), | |
| url(http://fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.woff2) format('woff2'), | |
| url(http://fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.woff) format('woff'), | |
| url(http://fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.ttf) format('truetype'); | |
| } | |
| .hoge { | |
| font-family: 'Nico Moji Hoge', sans-serif; | |
| } | |
| .fuga { | |
| font-family: 'arial black', sans-serif; | |
| } | |
| .piyo { | |
| font-family: 'でたらめなフォント名', sans-serif; | |
| } | |
| .serif { | |
| font-family: serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hoge"> | |
| 古池や<br /> | |
| 蛙飛びこむ<br /> | |
| 水の音<br /> | |
| basya! basya!<br /> | |
| </div> | |
| <hr /> | |
| <div class="fuga"> | |
| 古池や<br /> | |
| 蛙飛びこむ<br /> | |
| 水の音<br /> | |
| basya! basya!<br /> | |
| </div> | |
| <hr /> | |
| <div class="piyo"> | |
| 古池や<br /> | |
| 蛙飛びこむ<br /> | |
| 水の音<br /> | |
| basya! basya!<br /> | |
| </div> | |
| <hr /> | |
| <div class="serif"> | |
| 古池や<br /> | |
| 蛙飛びこむ<br /> | |
| 水の音<br /> | |
| basya! basya!<br /> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment