diff --git a/README.md b/README.md index f7bdf46c60fcb70b28fd89ec63420a93e2cfaf00..4dd66dd9a8ef7fb6ebe0d1c998b0c4bddff4105e 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 f4727778c4e99327aa60a1ee90a9d3215acb5f0c..7c8c35051f10dd0d0e7424385d5acedcbdf180f3 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");