Last active
September 22, 2016 08:02
-
-
Save ikait/e6705323930c7f294a99 to your computer and use it in GitHub Desktop.
Mac の Web ブラウザ (Chrome, Safari) などで、 iOS のようなフォント表示を実現するユーザースタイルシート
This file contains hidden or 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
| /** | |
| * iOS 10〜 | |
| * San Francisco, ヒラギノの組み合わせ | |
| */ | |
| @charset "utf-8"; | |
| textarea { | |
| font-family: monospace; | |
| } | |
| /** | |
| * sans-serif | |
| */ | |
| @font-face { | |
| font-family: sans-serif; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| @font-face { | |
| font-family: sans-serif; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * ＭＳ Ｐゴシック | |
| */ | |
| @font-face { | |
| font-family: "ＭＳ Ｐゴシック"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "ＭＳ Ｐゴシック"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * MS PGothic | |
| */ | |
| @font-face { | |
| font-family: "MS PGothic"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "MS PGothic"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * MS Gothic | |
| */ | |
| @font-face { | |
| font-family: "MS Gothic"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: "MS Gothic"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| unicode-range: U+0080-FFFF; | |
| } | |
| @font-face { | |
| font-family: "MS Gothic"; | |
| src: local("Consolas"); | |
| unicode-range: U+0000-007f,U+0095-04ce,U+2000-2014; | |
| } @font-face { | |
| font-family: "MS Gothic"; | |
| font-weight: bold; | |
| src: local("Consolas"); | |
| unicode-range: U+0000-007f,U+0095-04ce,U+2000-2014; | |
| } | |
| /** | |
| * monospace | |
| */ | |
| @font-face { | |
| font-family: monospace; | |
| src: local("Consolas"); | |
| unicode-range: U+0000-007f,U+0095-04ce,U+2000-2014; | |
| } @font-face { | |
| font-family: monospace; | |
| font-weight: bold; | |
| src: local("Consolas"); | |
| unicode-range: U+0000-007f,U+0095-04ce,U+2000-2014; | |
| } | |
| /* | |
| * Osaka | |
| */ | |
| @font-face { | |
| font-family: "Osaka"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Osaka"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * Hiragino kaku Gothic Pro | |
| */ | |
| @font-face { | |
| font-family: "Hiragino Kaku Gothic Pro"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Hiragino Kaku Gothic Pro"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * Hiragino kaku Gothic ProN | |
| */ | |
| @font-face { | |
| font-family: "Hiragino Kaku Gothic ProN"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Hiragino Kaku Gothic ProN"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * Meiryo | |
| */ | |
| @font-face { | |
| font-family: "Meiryo"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Meiryo"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| font-weight: bold; | |
| } | |
| /** | |
| * Verdana | |
| */ | |
| @font-face { | |
| font-family: "Verdana"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Verdana"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * Lucida Grande | |
| */ | |
| @font-face { | |
| font-family: "Lucida Grande"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Lucida Grande"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * Arial | |
| */ | |
| @font-face { | |
| font-family: "Arial"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Arial"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * Trebuchet MS | |
| */ | |
| @font-face { | |
| font-family: "Trebuchet MS"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Trebuchet MS"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } | |
| /** | |
| * Century Gothic | |
| */ | |
| @font-face { | |
| font-family: "Century Gothic"; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } @font-face { | |
| font-family: "Century Gothic"; | |
| font-weight: bold; | |
| src: local("BlinkMacSystemFont"), local("-apple-system"); | |
| } |
This file contains hidden or 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
| /** | |
| * 〜iOS 9 | |
| * Helvetica Neue, ヒラギノの組み合わせ | |
| */ | |
| @charset "utf-8"; | |
| textarea { | |
| font-family: monospace; | |
| } | |
| /** | |
| * sans-serif | |
| */ | |
| @font-face { | |
| font-family: sans-serif; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: sans-serif; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0400-U+0523; | |
| } | |
| @font-face { | |
| font-family: sans-serif; | |
| font-weight: bold; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: sans-serif; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0400-U+0523; | |
| } | |
| /** | |
| * ＭＳ Ｐゴシック | |
| */ | |
| @font-face { | |
| font-family: "ＭＳ Ｐゴシック"; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: "ＭＳ Ｐゴシック"; | |
| font-weight: bold; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } | |
| @font-face { | |
| font-family: "ＭＳ Ｐゴシック"; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } @font-face { | |
| font-family: "ＭＳ Ｐゴシック"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } | |
| /** | |
| * MS PGothic | |
| */ | |
| @font-face { | |
| font-family: "MS PGothic"; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: "MS PGothic"; | |
| font-weight: bold; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } | |
| @font-face { | |
| font-family: "MS PGothic"; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } @font-face { | |
| font-family: "MS PGothic"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } | |
| /** | |
| * MS Gothic | |
| */ | |
| @font-face { | |
| font-family: "MS Gothic"; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: "MS Gothic"; | |
| font-weight: bold; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } | |
| @font-face { | |
| font-family: "MS Gothic"; | |
| src: local("Menlo"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } @font-face { | |
| font-family: "MS Gothic"; | |
| font-weight: bold; | |
| src: local("Menlo"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } | |
| /** | |
| * monospace | |
| */ | |
| @font-face { | |
| font-family: monospace; | |
| src: local("Menlo"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } @font-face { | |
| font-family: monospace; | |
| font-weight: bold; | |
| src: local("Menlo"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } | |
| /* | |
| * Osaka | |
| */ | |
| @font-face { | |
| font-family: "Osaka"; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: "Osaka"; | |
| font-weight: bold; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } | |
| @font-face { | |
| font-family: "Osaka"; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } @font-face { | |
| font-family: "Osaka"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } | |
| /** | |
| * Hiragino kaku Gothic Pro | |
| */ | |
| @font-face { | |
| font-family: "Hiragino Kaku Gothic Pro"; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: "Hiragino Kaku Gothic Pro"; | |
| font-weight: bold; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } | |
| @font-face { | |
| font-family: "Hiragino Kaku Gothic Pro"; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } @font-face { | |
| font-family: "Hiragino Kaku Gothic Pro"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } | |
| /** | |
| * Hiragino kaku Gothic ProN | |
| */ | |
| @font-face { | |
| font-family: "Hiragino Kaku Gothic ProN"; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: "Hiragino Kaku Gothic ProN"; | |
| font-weight: bold; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } | |
| @font-face { | |
| font-family: "Hiragino Kaku Gothic ProN"; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } @font-face { | |
| font-family: "Hiragino Kaku Gothic ProN"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } | |
| /** | |
| * Meiryo | |
| */ | |
| @font-face { | |
| font-family: "Meiryo"; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| } @font-face { | |
| font-family: "Meiryo"; | |
| src: local("Hiragino Kaku Gothic ProN"); | |
| unicode-range: U+0080-FFFF; | |
| font-weight: bold; | |
| } | |
| @font-face { | |
| font-family: "Meiryo"; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| } @font-face { | |
| font-family: "Meiryo"; | |
| src: local("Helvetica Neue"); | |
| unicode-range: U+0000-007f,U+0095-U+04ce,U+2000-U+2014; | |
| font-weight: bold; | |
| } | |
| /** | |
| * Verdana | |
| */ | |
| @font-face { | |
| font-family: "Verdana"; | |
| src: local("Helvetica Neue"); | |
| } @font-face { | |
| font-family: "Verdana"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| } | |
| /** | |
| * Lucida Grande | |
| */ | |
| @font-face { | |
| font-family: "Lucida Grande"; | |
| src: local("Helvetica Neue"); | |
| } @font-face { | |
| font-family: "Lucida Grande"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| } | |
| /** | |
| * Arial | |
| */ | |
| @font-face { | |
| font-family: "Arial"; | |
| src: local("Helvetica Neue"); | |
| } @font-face { | |
| font-family: "Arial"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| } | |
| /** | |
| * Trebuchet MS | |
| */ | |
| @font-face { | |
| font-family: "Trebuchet MS"; | |
| src: local("Helvetica Neue"); | |
| } @font-face { | |
| font-family: "Trebuchet MS"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| } | |
| /** | |
| * Century Gothic | |
| */ | |
| @font-face { | |
| font-family: "Century Gothic"; | |
| src: local("Helvetica Neue"); | |
| } @font-face { | |
| font-family: "Century Gothic"; | |
| font-weight: bold; | |
| src: local("Helvetica Neue"); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment