Last active
May 23, 2023 12:10
-
-
Save herrernst/a4a8b07394530d477e173ae920dce8b4 to your computer and use it in GitHub Desktop.
css font tests
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| p, ul { | |
| margin-top: 0.5em; | |
| margin-bottom: 0.5em; | |
| } | |
| .condensed { | |
| font-stretch: condensed; | |
| background: rgba(255, 255, 0, 0.3); | |
| } | |
| </style> | |
| <h1>test auto condensed with pre-installed font</h1> | |
| <p>Working on:</p> | |
| <ul> | |
| <li>macOS 13 (system/SF): Safari, Firefox</li> | |
| <li>Windows 10 (Arial): Edge, Chrome, Firefox</li> | |
| <li>iOS 16: Safari</li> | |
| <li>Android: Firefox</li> | |
| </ul> | |
| <p>Not working on:</p> | |
| <ul> | |
| <li>macOS: Chrome (FIXME)</li> | |
| <li>Android: Chrome (Roboto not even selectableby name), see <a href=" https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml">fonts.xml</a></li> | |
| </ul> | |
| <p><code><script>document.write(navigator.userAgent)</script></code></p> | |
| <div style="font-family: Arial, monospace"> | |
| <h2>Arial</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| <div style="font-family: -apple-system, BlinkMacSystemFont, monospace"> | |
| <h2>-apple-system, BlinkMacSystemFont</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| <div style="font-family: AvenirNext, monospace"> | |
| <h2>Avenir Next</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| <div style="font-family: Roboto, monospace"> | |
| <h2>Roboto</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| <!-- "Segoe UI" has no condensed; even "Segoe UI Variable" on Windows 11 hasn't --> | |
| <!-- | |
| <div style="font-family: Segoe UI Variable, monospace"> | |
| <h2>Segoe UI</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| @font-face { | |
| font-family: localArial; | |
| src: local(Arial); | |
| } | |
| @font-face { | |
| font-family: localArial; | |
| src: local(ArialNarrow); | |
| font-stretch: condensed; | |
| } | |
| @font-face { | |
| font-family: localHelvetica; | |
| src: local(Helvetica); | |
| } | |
| @font-face { | |
| font-family: localAvenirNext; | |
| /* "Avenir Next": macOS Safari, Firefox; "AvenirNext-Regular": Chrome */ | |
| src: local(Avenir Next), local(AvenirNext-Regular); | |
| } | |
| @font-face { | |
| font-family: localAvenirNext; | |
| font-stretch: condensed; | |
| src: local(Avenir Next Condensed), local(AvenirNextCondensed-Regular); | |
| } | |
| @font-face { | |
| /* roboto is Variable on Android */ | |
| font-family: localRoboto; | |
| src: local(Roboto); | |
| font-stretch: 75% 100%; | |
| } | |
| @font-face { | |
| font-family: localSFPro; | |
| src: local("SF Pro"), local("-apple-system"), local("SFPro-Regular"); | |
| } | |
| @font-face { | |
| font-family: localSFPro; | |
| src: local("SF Pro Italic"), local("-apple-system"), local("SFPro-RegularItalic"); | |
| font-style: italic; | |
| } | |
| /* not working, italic has no condensed (no wght axis) */ | |
| /* | |
| @font-face { | |
| font-family: localSFPro; | |
| src: local("SF Pro Italic"), local("-apple-system"), local("SFPro-CondensedItalic"); | |
| font-style: italic; | |
| font-stretch: condensed; | |
| } | |
| */ | |
| /* could also use variable definition, not working in chrome */ | |
| /* | |
| @font-face { | |
| font-family: localSFPro; | |
| src: local("SF Pro"), local("-apple-system"), local("SFPro-Regular"); | |
| font-stretch: 30% 150%; | |
| font-weight: 1 1000; | |
| } | |
| */ | |
| @font-face { | |
| /* on windows, only working in firefox */ | |
| font-family: localSegoeUIVar; | |
| src: local("Segoe UI Variable"), local("SegoeUIVariable"), local("Segoe UI Variable Text");/* why? */ | |
| /* font-weight: 300 700; */ | |
| /* no italic, no condensed */ | |
| } | |
| p, ul { | |
| margin-top: 0.5em; | |
| margin-bottom: 0.5em; | |
| } | |
| .condensed { | |
| font-stretch: condensed; | |
| background: rgba(255, 255, 0, 0.3); | |
| } | |
| .note { | |
| font-family: monospace; | |
| } | |
| </style> | |
| <h1>auto ribbi local font-face test</h1> | |
| <p>Working on:</p> | |
| <ul> | |
| <li>macOS: Safari, Chrome</li> | |
| <li>Windows: Edge, Chrome</li> | |
| <li>iOS: Safari</li> | |
| <li>Android: Chrome, Firefox (!)</li> | |
| </ul> | |
| <p>Not working on:</p> | |
| <ul> | |
| <li>macOS: Firefox (needs extra bold/italic definition with static fonts)</li> | |
| <li>Windows: Firefox (needs extra bold/italic definition with static fonts)</li> | |
| </ul> | |
| <p><code>font-synthesis: none</code> not working on Chrome (macOS, Windows, Android) (<a href="https://github.com/mdn/browser-compat-data/issues/18925">report</a>)</p> | |
| <p>Auto condensed works on macOS, Win, iOS, Android (only Firefox, not Chrome) with extra definitions</p> | |
| <p><span style="font-family: monospace">monospace</span> rendering means font is not available.</p> | |
| <p><span class="condensed">yellow background should be condensed</span></p> | |
| <p><code><script>document.write(navigator.userAgent)</script></code></p> | |
| <div style="font-family: localArial, monospace"> | |
| <h2>Arial</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| <div style="font-family: localHelvetica, monospace"> | |
| <h2>Helvetica</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| <div style="font-family: localAvenirNext, monospace"> | |
| <h2>Avenir Next</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| <div style="font-family: localRoboto, monospace"> | |
| <h2>Roboto</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| </div> | |
| <div style="font-family: localSFPro, monospace"> | |
| <h2>San Francisco Pro</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <p class="note">italic has no condensed</p> | |
| </div> | |
| <div style="font-family: localSegoeUIVar, monospace"> | |
| <h2>Segoe UI Variable</h2> | |
| <h3>with font-synthesis</h3> | |
| <p style="font-synthesis: weight style"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <h3>without font-synthesis</h3> | |
| <p style="font-synthesis: none"> | |
| Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit, sed do eiusmod tempor</b> incididunt ut labore et dolore magna aliqua. <i>Duis aute irure dolor in reprehenderit</i> in voluptate <span class="condensed">velit esse cillum <i>dolore</i> eu fugiat <b>nulla</b> pariatur</span>. | |
| </p> | |
| <p class="note">has no condensed, has no italic</p> | |
| </div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment