A modern system font stack for consistent multi-lingual typesetting across platforms, optimized by unicode ranges.
system-font-i18n
provides twelve variations for the Sans-serif family of
system font. This font stack provides more consistent character typesetting
across multiple languages and all modern operating systems.
system-font-i18n
is optimized to select the best system font on a
per-character basis, based on the unicode range of that character.
The robust and preferred method is to reference the system-font-i18n.css
stylesheet in the <head>
of the html
document. Then add the utility
helper class to the body
class
.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="system-font-i18n.css">
</head>
<body class="system-font-i18n-sans">
<p>this is now using the system font!</p>
</body>
Use yarn
or npm
to install the package.
yarn add system-font-i18n-css -D
Add the include path to your ember-cli-build.js
file.
var app = new EmberApp(defaults, {
// …
sassOptions: {
includePaths: [
// …
'node_modules/system-font-i18n-css',
// …
],
},
// …
});
Import the CSS into your Ember project.
@import "system-font-i18n-css"; /* This should be AT or near the top */
/* … other imports */
Add the system-font-i18n-sans
CSS classname to the element to be styled, e.g.:
<!--- HTML head -->
<body class="system-font-i18n-sans">
<!-- body -->
A product of 青 心 工 機 Co., Ltd