From 11153524cec56a8eb876d3245bf77c5910d35551 Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleatherman@gmail.com>
Date: Wed, 28 Jun 2017 10:52:10 -0500
Subject: [PATCH] Updates to use `system-ui`
---
README.md | 17 ++++++++++-------
system-font.css | 16 ++++++++--------
2 files changed, 18 insertions(+), 15 deletions(-)
diff --git a/README.md b/README.md
index f7bdf46..4dd66dd 100644
--- a/README.md
+++ b/README.md
@@ -4,19 +4,19 @@ System Font CSS is set of `@font-face` rules that let you use the native system
```css
body {
- font-family: system;
+ font-family: system-ui;
}
```
-[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**.
+[system-font.css](system-font.css) offers eight variations of the `system-ui` 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;
+ font: italic 300 system-ui;
}
p {
- font: 400 system;
+ font: 400 system-ui;
}
```
@@ -32,7 +32,7 @@ Also, for those of opposed to joy, remember that **Internet Explorer 8** does no
```css
body {
- font-family: system, "Segoe UI", Tahoma;
+ font-family: system-ui, "Segoe UI", Tahoma;
}
```
@@ -44,6 +44,9 @@ body {
Ubuntu has always used one system typeface, apty named **Ubuntu**. That part was easy.
-## Is `system` going to be a thing?
+## Native `system-ui` resources
-Maybe. There are [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family.
+* [CSS Fonts Module Level 4 Editor’s Draft Specification](https://drafts.csswg.org/css-fonts-4/#system-ui-def)
+* [Chrome Platform Status](https://www.chromestatus.com/feature/5640395337760768)
+* Proposed for inclusion on [Can I Use](https://github.com/Fyrd/caniuse/issues/2918)
+* Previous [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family.
diff --git a/system-font.css b/system-font.css
index f472777..7c8c350 100644
--- a/system-font.css
+++ b/system-font.css
@@ -1,56 +1,56 @@
/*! system-font.css v1.1.0 | CC0-1.0 License | github.com/jonathantneal/system-font-face */
@font-face {
- font-family: system;
+ font-family: system-ui;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
@font-face {
- font-family: system;
+ font-family: system-ui;
font-style: italic;
font-weight: 300;
src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
}
@font-face {
- font-family: system;
+ font-family: system-ui;
font-style: normal;
font-weight: 400;
src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
}
@font-face {
- font-family: system;
+ font-family: system-ui;
font-style: italic;
font-weight: 400;
src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
}
@font-face {
- font-family: system;
+ font-family: system-ui;
font-style: normal;
font-weight: 500;
src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
}
@font-face {
- font-family: system;
+ font-family: system-ui;
font-style: italic;
font-weight: 500;
src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
}
@font-face {
- font-family: system;
+ font-family: system-ui;
font-style: normal;
font-weight: 700;
src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
}
@font-face {
- font-family: system;
+ font-family: system-ui;
font-style: italic;
font-weight: 700;
src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
--
GitLab