diff --git a/CHANGELOG.md b/CHANGELOG.md index a660095bebb165c57a8e5a14e1e85606f5ac8c52..e98c7edfab887d6c7d0cd570871097d9f5527a14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 1.1.0 (2015-08-02) + +- Added: Android fonts Roboto and Droid Sans after Ubuntu. +- Removed: Windows 3.1-ME font Microsoft Sans Serif. +- Updated: documentation. + ## 1.0.0 (2015-07-30) -Added: Initial version +- Added: Initial version diff --git a/README.md b/README.md index 326eeae3621ff9665707c7b15f85c2315db49ac3..f7bdf46c60fcb70b28fd89ec63420a93e2cfaf00 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,19 @@ p { ## Windows -**Windows** has used four system typefaces. Since **Vista** it has used **Segoe UI**. In XP, it used **Tahoma**, which oddly enough does not have an italic variation. From **Windows XP** back to **Windows 3.1** it used **Microsoft Sans Serif**. Finally, from **Windows 2.0** back to **Windows 1.0** it used **Fixedsys**, which is not included in this set, with apologies to Windows 2.0 users. +**Windows** has used four system typefaces. Since **Vista** it has used **Segoe UI**. In XP, it used **Tahoma**, which oddly enough does not have an italic variation. From **Windows ME** back to **Windows 3.1** it used **Microsoft Sans Serif**. Finally, from **Windows 2.0** back to **Windows 1.0** it used **Fixedsys**. Neither **Microsoft Sans Serif** or **Fixedsys** are included in this set, with apologies. + +Also, for those of opposed to joy, remember that **Internet Explorer 8** does not support local `@font-face` rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the `font` declaration. + +```css +body { + font-family: system, "Segoe UI", Tahoma; +} +``` + +## Android + +**Android** has used two system typefaces. Since **Ice Cream Sandwich** it has used **Roboto**. From **Jelly Bean** back to **Cupcake** it used **Droid Sans**, which also lacks an italic variation. Do you suppose OS developers dislike *emphasis*? ## Ubuntu diff --git a/index.html b/index.html index f4e168d9fa41de4237a2fdea180be157632ef037..e9c8f629562b229d80f6217fc3f986173179a3c3 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@ } body { - font: 1em/1.6 system; + font: 1em/1.6 system, Tahoma, sans-serif; margin: 3em auto; max-width: 40em; } @@ -66,7 +66,7 @@ code, pre { border-radius: 3px; font-family: "monospace", monospace; - font-size: 1em; + font-size: 85%; } p, @@ -76,7 +76,6 @@ pre { code { background-color: rgba(0,0,0,.04); - font-size: 85%; padding: .2em; } @@ -84,6 +83,8 @@ pre { background-color: #f7f7f7; line-height: 1.45; padding: 1em; + -moz-tab-size: 4; + tab-size: 4; } a { @@ -95,6 +96,18 @@ a:focus, a:hover { text-decoration: underline; } + +.token-selector { + color: #0A0; +} + +.token-property-name { + color: #44B; +} + +.token-property-value { + color: #B50; +} </style> <h1> @@ -106,8 +119,8 @@ a:hover { </p> <pre> -body { - font-family: system; +<span class="token-selector">body</span> { + <span class="token-property-name">font-family</span>: <span class="token-property-value">system</span>; } </pre> @@ -116,12 +129,12 @@ body { </p> <pre> -blockquote { - font: italic 300 system; +<span class="token-selector">blockquote</span> { + <span class="token-property-name">font</span>: <span class="token-property-value">italic 300 system</span>; } -p { - font: 400 system; +<span class="token-selector">p</span> { + <span class="token-property-name">font</span>: <span class="token-property-value">400 system</span>; } </pre> @@ -138,7 +151,25 @@ p { </h2> <p> - <strong>Windows</strong> has used four system typefaces. Since <strong>Vista</strong> it has used <strong>Segoe UI</strong>. In XP, it used <strong>Tahoma</strong>, which oddly enough does not have an italic variation. From <strong>Windows XP</strong> back to <strong>Windows 3.1</strong> it used <strong>Microsoft Sans Serif</strong>. Finally, from <strong>Windows 2.0</strong> back to <strong>Windows 1.0</strong> it used <strong>Fixedsys</strong>, which is not included in this set, with apologies to Windows 2.0 users. + <strong>Windows</strong> has used four system typefaces. Since <strong>Vista</strong> it has used <strong>Segoe UI</strong>. In XP, it used <strong>Tahoma</strong>, which oddly enough lacks an italic variation. From <strong>Windows ME</strong> back to <strong>Windows 3.1</strong> it used <strong>Microsoft Sans Serif</strong>. Finally, from <strong>Windows 2.0</strong> back to <strong>Windows 1.0</strong> it used <strong>Fixedsys</strong>. Neither <strong>Microsoft Sans Serif</strong> or <strong>Fixedsys</strong> are included in this set, with apologies. +</p> + +<p> + Also, for those of opposed to joy, remember that <strong>Internet Explorer 8</strong> does not support local <code>@font-face</code> rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the <code>font</code> declaration. +</p> + +<pre> +<span class="token-selector">body</span> { + <span class="token-property-name">font-family</span>: <span class="token-property-value">system, "Segoe UI", Tahoma</span>; +} +</pre> + +<h2> + Android +</h2> + +<p> + <strong>Android</strong> has used two system typefaces. Since <strong>Ice Cream Sandwich</strong> it has used <strong>Roboto</strong>. From <strong>Jelly Bean</strong> back to <strong>Cupcake</strong> it used <strong>Droid Sans</strong>, which also lacks an italic variation. Do you suppose OS developers dislike <em>emphasis</em>? </p> <h2> diff --git a/package.json b/package.json index 7bdcb4584654154905faad066c691c053db7b579..d58b4c243906a0334f838a06d4b2fc7a0ca5d8aa 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "system-font-css", "description": "Use the native system font of the OS running the browser", - "version": "1.0.0", + "version": "1.1.0", "author": "Jonathan Neal <jonathantneal@hotmail.com> (http://jonathantneal.com)", "contributors": [], "homepage": "https://github.com/jonathantneal/system-font-css", diff --git a/system-font.css b/system-font.css index 969475e8373f776a4af5896673d1d1c08eff9eb8..b15f53ec3e40503856f9b4b787c68cad9cb2b64e 100644 --- a/system-font.css +++ b/system-font.css @@ -1,57 +1,57 @@ -/*! system-font.css v1.0.0 | CC0-1.0 License | github.com/jonathantneal/system-font-face */ +/*! system-font.css v1.1.0 | CC0-1.0 License | github.com/jonathantneal/system-font-face */ @font-face { font-family: system; font-style: normal; font-weight: 300; - src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Tahoma"), local("Microsoft Sans Serif"); + src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); } @font-face { font-family: system; font-style: italic; font-weight: 300; - src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Ubuntu Light Italic"), local("Segoe UI Light Italic"), local("Microsoft Sans Serif"); + src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Ubuntu Light Italic"), local("Segoe UI Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"); } @font-face { font-family: system; font-style: normal; font-weight: 400; - src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Ubuntu"), local("Segoe UI"), local("Tahoma"), local("Microsoft Sans Serif"); + src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Ubuntu"), local("Segoe UI"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); } @font-face { font-family: system; font-style: italic; font-weight: 400; - src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Ubuntu Italic"), local("Segoe UI Italic"), local("Microsoft Sans Serif"); + src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Ubuntu Italic"), local("Segoe UI Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"); } @font-face { font-family: system; font-style: normal; font-weight: 500; - src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Ubuntu Medium"), local("Segoe UI Semibold"), local("Tahoma Bold"), local("Microsoft Sans Serif"); + src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Ubuntu Medium"), local("Segoe UI Semibold"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"); } @font-face { font-family: system; font-style: italic; font-weight: 500; - src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Ubuntu Medium Italic"), local("Segoe UI Semibold Italic"), local("Microsoft Sans Serif"); + src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Ubuntu Medium Italic"), local("Segoe UI Semibold Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); } @font-face { font-family: system; font-style: normal; font-weight: 700; - src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Ubuntu Bold"), local("Segoe UI Bold"), local("Tahoma Bold"), local("Microsoft Sans Serif"); + src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Segoe UI Bold"), local("Tahoma Bold"); } @font-face { font-family: system; font-style: italic; font-weight: 700; - src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Ubuntu Bold Italic"), local("Segoe UI Bold Italic"), local("Microsoft Sans Serif"); + src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Segoe UI Bold Italic"), local("Tahoma Bold"); }