kos31de / system-font-i18n-css Goto Github PK

View Code? Open in Web Editor NEW

A modern system font stack for consistent multi-lingual typesetting across platforms, optimized by unicode ranges.

License: MIT License

HTML 76.70% CSS 23.30%

system-font-i18n-css's Introduction

system-font-i18n-css

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.

Docs

Installation

General

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>

Ember

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 -->

LICENSE

MIT

A product of 青(せい) 心(しん) 工(こう) 機(き) (seishinkouki) Co., Ltd

Recommend Projects

kos31de / system-font-i18n-css Goto Github PK