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

1.0.0

parents
No related branches found
No related tags found
No related merge requests found
## 1.0.0 (2015-07-30)
Added: Initial version
# CC0 1.0 Universal License
Public Domain Dedication
The person(s) who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.
You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.
In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights.
Unless expressly stated otherwise, the person(s) who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law.
When using or citing the work, you should not imply endorsement by the author or the affirmer.
This is a [human-readable summary of the Legal Code](https://creativecommons.org/publicdomain/zero/1.0/) ([read the full text](https://creativecommons.org/publicdomain/zero/1.0/legalcode)).
# System Font CSS
System Font CSS is set of `@font-face` rules that let you use the native system font of the OS running the browser.
```css
body {
font-family: system;
}
```
[system-font.css](system-font.css) offers eight variations of the `system` font family; **light** (300) **light italic**, **normal** (400), **normal italic**, **medium** (500), **medium italic**, **bold** (700), and **bold italic**.
```css
blockquote {
font: italic 300 system;
}
p {
font: 400 system;
}
```
## OSX
**OSX** has used three system typefaces. Since **El Capitan** it has used **San Fransisco**. In **Yosemite** it used **Helvetica Neue**. From **Mavericks** back to **Kodiak** it used **Lucida Grande**.
## 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.
## Ubuntu
Ubuntu has always used one system typeface, apty named **Ubuntu**. That part was easy.
## Is `system` going to be a thing?
Maybe. There are [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family.
<!doctype html>
<title>System Font CSS</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="system-font.css" rel="stylesheet">
<style>
@font-face {
font-family: monospace;
font-style: normal;
font-weight: 400;
src: local("Menlo-Regular"), local("Monaco"), local("Consolas"), local("DejaVu Sans Mono"), local("DejaVu Sans Mono");
}
@font-face {
font-family: monospace;
font-style: italic;
font-weight: 400;
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-Italic"), local("DejaVu Sans Mono Oblique");
}
@font-face {
font-family: monospace;
font-style: normal;
font-weight: 700;
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-Bold"), local("DejaVu Sans Mono Bold");
}
@font-face {
font-family: monospace;
font-style: italic;
font-weight: 700;
src: local("Menlo-Regular"), local("Monaco"), local("Consolas-BoldItalic"), local("DejaVu Sans Mono Bold Oblique");
}
body {
font: 1em/1.6 system;
margin: 3em auto;
max-width: 40em;
}
@media (max-width: 42em) {
body {
margin: 3em 1em;
}
}
h1,
h2 {
border-bottom: 1px solid #eee;
padding-bottom: .3em;
}
h1 {
margin: 1em 0 1rem;
font-size: 2.25em;
}
h2 {
font-size: 1.75em;
line-height: 1.225;
margin: 1em 0 1rem;
}
code,
pre {
border-radius: 3px;
font-family: "monospace", monospace;
font-size: 1em;
}
p,
pre {
margin: 0 0 1em;
}
code {
background-color: rgba(0,0,0,.04);
font-size: 85%;
padding: .2em;
}
pre {
background-color: #f7f7f7;
line-height: 1.45;
padding: 1em;
}
a {
color: #4078c0;
text-decoration: none;
}
a:focus,
a:hover {
text-decoration: underline;
}
</style>
<h1>
System Font CSS
</h1>
<p>
System Font CSS is set of <code>@font-face</code> rules that let you use the native system font of the OS running the browser.
</p>
<pre>
body {
font-family: system;
}
</pre>
<p>
<a href="https://github.com/jonathantneal/system-font-css">system-font.css</a> offers eight variations of the <code>system</code> font family; <strong>light</strong> (300) <strong>light italic</strong>, <strong>normal</strong> (400), <strong>normal italic</strong>, <strong>medium</strong> (500), <strong>medium italic</strong>, <strong>bold</strong> (700), and <strong>bold italic</strong>.
</p>
<pre>
blockquote {
font: italic 300 system;
}
p {
font: 400 system;
}
</pre>
<h2>
OSX
</h2>
<p>
<strong>OSX</strong> has used three system typefaces. Since <strong>El Capitan</strong> it has used <strong>San Fransisco</strong>. In <strong>Yosemite</strong> it used <strong>Helvetica Neue</strong>. From <strong>Mavericks</strong> back to <strong>Kodiak</strong> it used <strong>Lucida Grande</strong>.
</p>
<h2>
Windows
</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.
</p>
<h2>
Ubuntu
</h2>
<p>
Ubuntu has always used one system typeface, apty named <strong>Ubuntu</strong>. That part was easy.
</p>
<h2>
Is <code>system</code> going to be a thing?
</h2>
<p>
Maybe. There are <a href="https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html" target="_blank">discussions in the W3C</a> to standardize a generic <code>system</code> family.
</p>
{
"name": "system-font-css",
"description": "Use the native system font of the OS running the browser",
"version": "1.0.0",
"author": "Jonathan Neal <jonathantneal@hotmail.com> (http://jonathantneal.com)",
"contributors": [],
"homepage": "https://github.com/jonathantneal/system-font-css",
"license": "CC0-1.0",
"keywords": ["system", "fonts", "faces", "rules", "css", "mac", "windows", "ubuntu", "san", "fransisco", "helvetica", "neue", "lucida", "grande", "segoe", "ui", "microsoft", "sans", "serif"],
"bugs": {
"url": "https://github.com/jonathantneal/system-font-css/issues"
},
"repository": {
"type": "git",
"url": "git@github.com:jonathantneal/system-font-css.git"
},
"engines": {
"node": ">=0.8.0"
},
"dependencies": {},
"devDependencies": {},
"main": "system-font.css",
"scripts": {}
}
\ No newline at end of file
/*! system-font.css v1.0.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");
}
@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");
}
@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");
}
@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");
}
@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");
}
@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");
}
@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");
}
@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");
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment