Skip to content
Snippets Groups Projects
Commit 24673bcd authored by Jonathan Neal's avatar Jonathan Neal
Browse files

Update system-font.css 

Added Android fonts Roboto and Droid Sans after Ubuntu.
Removed Windows 3.1-ME font Microsoft Sans Serif.
Updated documentation.
parent f89877d3
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
CHANGELOG.md
+ 7
− 1
View file @ 24673bcd
## 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) ## 1.0.0 (2015-07-30)
Added: Initial version - Added: Initial version
README.md
+ 13
− 1
View file @ 24673bcd
...@@ -26,7 +26,19 @@ p { ...@@ -26,7 +26,19 @@ p {
## Windows ## 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 ## Ubuntu
......
index.html
+ 41
− 10
View file @ 24673bcd
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
} }
body { body {
font: 1em/1.6 system; font: 1em/1.6 system, Tahoma, sans-serif;
margin: 3em auto; margin: 3em auto;
max-width: 40em; max-width: 40em;
} }
...@@ -66,7 +66,7 @@ code, ...@@ -66,7 +66,7 @@ code,
pre { pre {
border-radius: 3px; border-radius: 3px;
font-family: "monospace", monospace; font-family: "monospace", monospace;
font-size: 1em; font-size: 85%;
} }
p, p,
...@@ -76,7 +76,6 @@ pre { ...@@ -76,7 +76,6 @@ pre {
code { code {
background-color: rgba(0,0,0,.04); background-color: rgba(0,0,0,.04);
font-size: 85%;
padding: .2em; padding: .2em;
} }
...@@ -84,6 +83,8 @@ pre { ...@@ -84,6 +83,8 @@ pre {
background-color: #f7f7f7; background-color: #f7f7f7;
line-height: 1.45; line-height: 1.45;
padding: 1em; padding: 1em;
-moz-tab-size: 4;
tab-size: 4;
} }
a { a {
...@@ -95,6 +96,18 @@ a:focus, ...@@ -95,6 +96,18 @@ a:focus,
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
.token-selector {
color: #0A0;
}
.token-property-name {
color: #44B;
}
.token-property-value {
color: #B50;
}
</style> </style>
<h1> <h1>
...@@ -106,8 +119,8 @@ a:hover { ...@@ -106,8 +119,8 @@ a:hover {
</p> </p>
<pre> <pre>
body { <span class="token-selector">body</span> {
font-family: system; <span class="token-property-name">font-family</span>: <span class="token-property-value">system</span>;
} }
</pre> </pre>
...@@ -116,12 +129,12 @@ body { ...@@ -116,12 +129,12 @@ body {
</p> </p>
<pre> <pre>
blockquote { <span class="token-selector">blockquote</span> {
font: italic 300 system; <span class="token-property-name">font</span>: <span class="token-property-value">italic 300 system</span>;
} }
p { <span class="token-selector">p</span> {
font: 400 system; <span class="token-property-name">font</span>: <span class="token-property-value">400 system</span>;
} }
</pre> </pre>
...@@ -138,7 +151,25 @@ p { ...@@ -138,7 +151,25 @@ p {
</h2> </h2>
<p> <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> </p>
<h2> <h2>
......
package.json
+ 1
− 1
View file @ 24673bcd
{ {
"name": "system-font-css", "name": "system-font-css",
"description": "Use the native system font of the OS running the browser", "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)", "author": "Jonathan Neal <jonathantneal@hotmail.com> (http://jonathantneal.com)",
"contributors": [], "contributors": [],
"homepage": "https://github.com/jonathantneal/system-font-css", "homepage": "https://github.com/jonathantneal/system-font-css",
......
system-font.css
+ 9
− 9
View file @ 24673bcd
/*! 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-face {
font-family: system; font-family: system;
font-style: normal; font-style: normal;
font-weight: 300; 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-face {
font-family: system; font-family: system;
font-style: italic; font-style: italic;
font-weight: 300; 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-face {
font-family: system; font-family: system;
font-style: normal; font-style: normal;
font-weight: 400; 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-face {
font-family: system; font-family: system;
font-style: italic; font-style: italic;
font-weight: 400; 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-face {
font-family: system; font-family: system;
font-style: normal; font-style: normal;
font-weight: 500; 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-face {
font-family: system; font-family: system;
font-style: italic; font-style: italic;
font-weight: 500; 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-face {
font-family: system; font-family: system;
font-style: normal; font-style: normal;
font-weight: 700; 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-face {
font-family: system; font-family: system;
font-style: italic; font-style: italic;
font-weight: 700; 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");
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment