Nefarious Planetary Meddling
    Have ideas to improve npm?Join in the discussion! »

    yohakutojp

    0.4.0 • Public • Published

    Yoha Kuto JP

    Demo

    About

    "Yoha Kuto JP"は、font-feature-settings: "palt";を使った日本語文字詰めで「句読点のみ余裕を持たせたい」と考えた場合に利用する「余白のある句読点専用Webフォント」です。Googleの"Noto Sans CJK JP(源ノ角ゴシック)"と"Noto Serif CJK JP(源ノ明朝)"をベースにしており、ゴシック体と明朝体でそれぞれ7ウェイト対応できます。

    Detail

    仕組みは、「メトリクス情報を持たない等幅句読点だけのフォント」をfont-feature-settings: "palt";で詰まるフォントよりも前に優先的適応することです。font-family(CSS)のフォールバック機能を利用しています。プロポーショナルメトリクスが利用できるモダンブラウザでのみ効果を発揮します。動的コンテンツへの利用が最適。1つのフォントが2〜4KBと軽量なので、表示速度やパフォーマンスを重視するサイトへの使用も安心です。

    Valuation

    ゴシック体と明朝体を使い分けられます。

    • YohaKutoJP : ゴシック体
    • YohaKutoMP : 明朝体

    内包する文字はそれぞれ以下の通りです。

    // YohaKutoJP
    、。
    
    // YohaKutoMP
    、。
    

    ※バグ回避のため、上記に加え.notdefspaceellipsisが含まれています。

    ウェイトは7段階。付属のCSSでは以下のfont-weightで指定できます。※Noto Sans CJK JPとNoto Serif CJK JPでウエイト・ファイル名が若干異なるため、当ライブラリ内のファイル名もそれに準じています。

    • font-weight: 100;
    • font-weight: 200;
    • font-weight: 300;
    • font-weight: 400;
    • font-weight: 500;
    • font-weight: 700;
    • font-weight: 900;

    Use

    CDN

    jsDelivrで配信しているCSSファイルへのリンクをHTML内に記述するだけで全ウェイトのフォントを利用できます。

    // YohaKutoJP
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/css/yohakutojp.min.css">
     
    // YohaKutoMP
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/css/yohakutomp.min.css">

    npm

    npmコマンドで任意の場所にインストールできます。

    npm install yohakutojp
    

    Download

    1. データをダウンロード
    2. distフォルダ内の「css」「fonts」を制作サイトに配置
    3. HTML内でCSSを読み込む
    • ゴシック体「yohakutojp.min.css」
    • 明朝体「yohakutomp.min.css」
    1. CSSでフォントを適応
    • ゴシック体「YohaKutoJP」
    • 明朝体「YohaKutoMP」
    // YohaKutoJP
    <link rel="stylesheet" href="docs/css/yohakutojp.min.css">
     
    // YohaKutoMP
    <link rel="stylesheet" href="docs/css/yohakutomp.min.css">
    // YakuHanMP
    .yohakutojp {
      font-family: YohaKutoJP, "Hiragino Sans""Yu Gothic", YuGothic, sans-serif;
      font-feature-settings: "palt";
    }
     
    // YohaKutoMP
    .yohakutomp {
      font-family: YohaKutoMP, "Hiragino Mincho ProN""Yu Mincho", YuMincho, serif;
      font-feature-settings: "palt";
    }

    Custom

    Font face

    1. 利用するフォントファイルへのリンクを個別に取得(CDNの場合)
    1. CSS内にfont-faceを記述(以下はYohaKutoJPで300のウェイトを細くしfont-displayを適応した例)
    // Demi Light > Light
    @font-face {
      font-family: "YohaKutoJP";
      font-style: normal;
      font-weight: 300;
      src: url("https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/fonts/YohaKutoJP/YohaKutoJP-Light.eot");
      src: url("https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/fonts/YohaKutoJP/YohaKutoJP-Light.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/fonts/YohaKutoJP/YohaKutoJP-Light.woff") format("woff");
      font-display: swap;
    }

    Support

    Chrome Firefox IE Ege Opera Safari(Mac)
    62~ 56~ 11~ 14~ 36~ 9.1~
    Safari(iOS) Chrome(Android) Browser(Android)
    9.3~ 61~ 4.4~

    License

    Install

    npm i yohakutojp

    DownloadsWeekly Downloads

    1

    Version

    0.4.0

    License

    (OFL-1.1 AND MIT)

    Last publish

    Collaborators

    • avatar