Nostalgic Perogi Monogramming
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    yakuhanjppublic

    Yaku Han JP

    Demo

    About

    "Yaku Han JP"は、Web上の日本語テキストに含まれる約物を半角にする「約物半角専用Webフォント」です。Googleの"Noto Sans CJK JP(源ノ角ゴシック)"と"Noto Serif CJK JP(源ノ明朝)"、丸ゴシックの"Rounded M+ 1c"をベースにしており、ゴシック体・明朝体・丸ゴシックでそれぞれ7ウェイト対応できます。

    Detail

    仕組みは、文字幅を調整した「約物だけのフォント」をデバイスフォントよりも前に優先的適応することです。font-family(CSS)のフォールバック機能を利用しています。旧ブラウザ対応に優れ、動的コンテンツへの利用に最適。1つのフォントが4〜5KBと軽量なので、表示速度やパフォーマンスを重視するサイトへの使用も安心です。

    Valuation

    Include Fonts

    6種類のフォントを用意しています。ゴシック体・明朝体・丸ゴシックを使い分けられる他、カッコだけを半角にするSmall Amount(少量版)が使えます。

    • YakuHanJP : ゴシック体 All Include(全部入り版 : 約物すべて)
    • YakuHanJPs : ゴシック体 Small Amount(少量版 : カッコのみ)
    • YakuHanMP : 明朝体 All Include(全部入り版 : 約物すべて)
    • YakuHanMPs : 明朝体 Small Amount(少量版 : カッコのみ)
    • YakuHanRP : 丸ゴシック All Include(全部入り版 : 約物すべて)
    • YakuHanRPs : 丸ゴシック体 Small Amount(少量版 : カッコのみ)

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

    // YakuHanJP
    、。!?〈〉《》「」『』【】〔〕・():;[]{}
    
    // YakuHanJPs
    〈〉《》「」『』【】〔〕()[]{}
    
    // YakuHanMP
    、。!?《》「」『』【】〔〕・():;[]{}
    
    // YakuHanMPs
    《》「」『』【】〔〕()[]{}
    
    // YakuHanRP
    、。!?〈〉《》「」『』【】〔〕・():;[]{}
    
    // YakuHanRPs
    〈〉《》「」『』【】〔〕()[]{}
    

    ※バグ回避のため、全てのフォントに .notdef space ellipsis が含まれています

    Font Weight

    ウェイトは7段階。付属のCSSでは以下のfont-weightで指定できます。ベースフォント毎にウエイト・ファイル名が若干異なるため、当ライブラリ内のファイル名もそれぞれのベースフォントに準じています。

    YakuHanJP & YakuHanJPs

    • font-weight: 100; // Thin
    • font-weight: 200; // Light
    • font-weight: 300; // DemiLight
    • font-weight: 400; // Regular
    • font-weight: 500; // Medium
    • font-weight: 700; // Bold
    • font-weight: 900; // Black

    YakuHanMP & YakuHanMPs

    • font-weight: 100; // ExtraLight
    • font-weight: 200; // Light
    • font-weight: 300; // Regular
    • font-weight: 400; // Medium
    • font-weight: 500; // SemiBold
    • font-weight: 700; // Bold
    • font-weight: 900; // Black

    YakuHanRP & YakuHanRPs

    • font-weight: 100; // Thin
    • font-weight: 300; // Light
    • font-weight: 400; // Regular
    • font-weight: 500; // Medium
    • font-weight: 700; // Bold
    • font-weight: 800; // ExtraBold
    • font-weight: 900; // Black

    Use

    CDN

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

    // YakuHanJP:ゴシック体(約物全部入り)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp.min.css">
     
    // YakuHanJPs:ゴシック体(カッコのみ)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp_s.min.css">
     
    // YakuHanMP:明朝体(約物全部入り)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanmp.min.css">
     
    // YakuHanMPs:明朝体(カッコのみ)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanmp_s.min.css">
     
    // YakuHanRP:丸ゴシック(約物全部入り)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanrp.min.css">
     
    // YakuHanRPs:丸ゴシック(カッコのみ)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanrp_s.min.css">

    npm

    npmコマンドで任意のプロジェクトにインストールできます。

    npm install yakuhanjp
    

    Download

    1. データをダウンロード
    2. distフォルダ内の「css」「fonts」を制作サイトに配置
    3. HTML内でCSSを読み込む
    • ゴシック体
      • 約物すべてを使う場合は「yakuhanjp.min.css」
      • カッコだけを使う場合は「yakuhanjp_s.min.css」
    • 明朝体
      • 約物すべてを使う場合は「yakuhanmp.min.css」
      • カッコだけを使う場合は「yakuhanmp_s.min.css」
    • 丸ゴシック
      • 約物すべてを使う場合は「yakuhanrp.min.css」
      • カッコだけを使う場合は「yakuhanrp_s.min.css」
    1. CSSでフォントを適応
    • ゴシック体
      • 約物すべてを使う場合は「YakuHanJP」
      • カッコだけを使う場合は「YakuHanJPs」
    • 明朝体
      • 約物すべてを使う場合は「YakuHanMP」
      • カッコだけを使う場合は「YakuHanMPs」
    • 丸ゴシック
      • 約物すべてを使う場合は「YakuHanRP」
      • カッコだけを使う場合は「YakuHanRPs」
    // YakuHanJP:ゴシック体(約物全部入り)
    <link rel="stylesheet" href="dist/css/yakuhanjp.min.css">
     
    // YakuHanJPs:ゴシック体(カッコのみ)
    <link rel="stylesheet" href="dist/css/yakuhanjp_s.min.css">
     
    // YakuHanMP:明朝体(約物全部入り)
    <link rel="stylesheet" href="dist/css/yakuhanmp.min.css">
     
    // YakuHanMPs:明朝体(カッコのみ)
    <link rel="stylesheet" href="dist/css/yakuhanmp_s.min.css">
     
    // YakuHanRP:丸ゴシック(約物全部入り)
    <link rel="stylesheet" href="dist/css/yakuhanrp.min.css">
     
    // YakuHanRPs:丸ゴシック(カッコのみ)
    <link rel="stylesheet" href="dist/css/yakuhanrp_s.min.css">
    // YakuHanJP:ゴシック体(約物全部入り)
    .yakuhanjp {
      font-family: YakuHanJP, "Hiragino Sans", Meiryo, "Yu Gothic Medium"sans-serif;
    }
     
    // YakuHanJPs:ゴシック体(カッコのみ)
    .yakuhanjps {
      font-family: YakuHanJPs, "Hiragino Sans", Meiryo, "Yu Gothic Medium"sans-serif;
    }
     
    // YakuHanMP:明朝体(約物全部入り)
    .yakuhanmp {
      font-family: YakuHanMP, "Hiragino Mincho ProN""Yu Mincho", YuMincho, serif;
    }
     
    // YakuHanMPs:明朝体(カッコのみ)
    .yakuhanmps {
      font-family: YakuHanMPs, "Hiragino Mincho ProN""Yu Mincho", YuMincho, serif;
    }
     
    // YakuHanRP:丸ゴシック(約物全部入り)
    .yakuhanrp {
      font-family: YakuHanRP, "Rounded Mplus 1c"sans-serif;
    }
     
    // YakuHanRPs:丸ゴシック(カッコのみ)
    .yakuhanrps {
      font-family: YakuHanRPs, "Rounded Mplus 1c"sans-serif;
    }

    Custom

    Font face

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

    Support

    Chrome Firefox IE Ege Opera Safari(Mac)
    55~ 50~ 9~ 14~ 36~ 6~
    Safari(iOS) Chrome(Android) Browser(Android)
    7~ 51~ 4.4~

    Media

    License

    install

    npm i yakuhanjp

    Downloadsweekly downloads

    364

    version

    3.0.0

    license

    (OFL-1.1 AND MIT)

    repository

    githubgithub

    last publish

    collaborators

    • avatar