From 2c6f237685c2a114f9f1f071f0d9cc1d09be6912 Mon Sep 17 00:00:00 2001 From: Robbert Klarenbeek Date: Tue, 5 May 2020 18:13:51 +0200 Subject: [PATCH] Improve font stack with standard font families --- .../fixtures/tailwind-output-flagged.css | 40 +++++++++---------- .../fixtures/tailwind-output-important.css | 34 ++++++++-------- .../tailwind-output-no-color-opacity.css | 34 ++++++++-------- __tests__/fixtures/tailwind-output.css | 34 ++++++++-------- src/plugins/css/preflight.css | 4 +- stubs/defaultConfig.stub.js | 5 ++- 6 files changed, 76 insertions(+), 75 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index f27fbf4d8..36584c9f6 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -362,7 +362,7 @@ ul { */ html { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } @@ -490,7 +490,7 @@ pre, code, kbd, samp { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /** @@ -19453,15 +19453,15 @@ video { } .font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .font-thin { @@ -60992,15 +60992,15 @@ video { } .sm\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .sm\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .sm\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .sm\:font-thin { @@ -102501,15 +102501,15 @@ video { } .md\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .md\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .md\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .md\:font-thin { @@ -144010,15 +144010,15 @@ video { } .lg\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .lg\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .lg\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .lg\:font-thin { @@ -185519,15 +185519,15 @@ video { } .xl\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .xl\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .xl\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .xl\:font-thin { @@ -227028,15 +227028,15 @@ video { } .\32xl\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .\32xl\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .\32xl\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .\32xl\:font-thin { diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 453345b57..0edd1f8c1 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -362,7 +362,7 @@ ul { */ html { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } @@ -490,7 +490,7 @@ pre, code, kbd, samp { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /** @@ -9595,15 +9595,15 @@ video { } .font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } .font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif !important; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important; } .font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .font-hairline { @@ -27114,15 +27114,15 @@ video { } .sm\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } .sm\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif !important; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important; } .sm\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .sm\:font-hairline { @@ -44603,15 +44603,15 @@ video { } .md\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } .md\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif !important; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important; } .md\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .md\:font-hairline { @@ -62092,15 +62092,15 @@ video { } .lg\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } .lg\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif !important; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important; } .lg\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .lg\:font-hairline { @@ -79581,15 +79581,15 @@ video { } .xl\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } .xl\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif !important; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important; } .xl\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .xl\:font-hairline { diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index 5bd3596ff..8ecfb6d4d 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -362,7 +362,7 @@ ul { */ html { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } @@ -490,7 +490,7 @@ pre, code, kbd, samp { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /** @@ -8811,15 +8811,15 @@ video { } .font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .font-hairline { @@ -24986,15 +24986,15 @@ video { } .sm\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .sm\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .sm\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .sm\:font-hairline { @@ -41131,15 +41131,15 @@ video { } .md\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .md\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .md\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .md\:font-hairline { @@ -57276,15 +57276,15 @@ video { } .lg\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .lg\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .lg\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .lg\:font-hairline { @@ -73421,15 +73421,15 @@ video { } .xl\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .xl\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .xl\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .xl\:font-hairline { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index c2b4d42fb..cd015a3f9 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -362,7 +362,7 @@ ul { */ html { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } @@ -490,7 +490,7 @@ pre, code, kbd, samp { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /** @@ -9595,15 +9595,15 @@ video { } .font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .font-hairline { @@ -27114,15 +27114,15 @@ video { } .sm\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .sm\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .sm\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .sm\:font-hairline { @@ -44603,15 +44603,15 @@ video { } .md\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .md\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .md\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .md\:font-hairline { @@ -62092,15 +62092,15 @@ video { } .lg\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .lg\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .lg\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .lg\:font-hairline { @@ -79581,15 +79581,15 @@ video { } .xl\:font-sans { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .xl\:font-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .xl\:font-mono { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .xl\:font-hairline { diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index 511a692b0..9bb5e5ee7 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -63,7 +63,7 @@ ul { */ html { - font-family: theme('fontFamily.sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 1 */ + font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 1 */ line-height: 1.5; /* 2 */ } @@ -191,7 +191,7 @@ pre, code, kbd, samp { - font-family: theme('fontFamily.mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); + font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); } /** diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index f0f4ac6f0..7ad7c0bcb 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -247,6 +247,7 @@ module.exports = { }, fontFamily: { sans: [ + 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', @@ -261,8 +262,8 @@ module.exports = { '"Segoe UI Symbol"', '"Noto Color Emoji"', ], - serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], - mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'], + serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], + mono: ['ui-monospace', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'], }, fontSize: { xs: '0.75rem',