Yaku Han JP

約物半角専用のWebフォント

v2.0.0

Repository / Releases

Example

  • Gothic
  • Mincho
  • Full
  • Small
  • Hiragino
  • Yu
  • Noto
  • Meiryo
  • w100
  • w200
  • w300
  • w400
  • w500
  • w700
  • w900
  • 0.625em
  • 0.75em
  • 0.875em
  • 1em
  • 1.25em
  • 1.5em
  • 2em

「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは7種類。Noto Sans Japaneseに沿っています。

「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは7種類。Noto Sans Japaneseに沿っています。

Include Fonts

YakuHanJP ゴシック体 All Include(全部入り版)

、。!?〈〉《》「」『』【】〔〕・():;[]{}…

YakuHanJPs ゴシック体 Small Amount(少量版)

〈〉《》「」『』【】〔〕()[]{}…

YakuHanMP 明朝体 All Include(全部入り版)

、。!?《》「」『』【】〔〕・():;[]{}…

YakuHanMPs 明朝体 Small Amount(少量版)

《》「」『』【】〔〕()[]{}…

How To Use

CDN

  1. jsDelivrで配信しているCSSファイルへのリンクをHTML内に記述

    // YakuHanJP
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanjp.min.css">
    
    // YakuHanJPs
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanjp_s.min.css">
    
    // YakuHanMP
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanmp.min.css">
    
    // YakuHanMPs
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanmp_s.min.css">
    

npm

  1. npmコマンドで任意の場所にインストール

    npm install yakuhanjp
    

Local

  1. データをダウンロード

  2. distフォルダ内の「css」「fonts」を制作サイトに配置

  3. HTML内でCSSを読み込む

    // 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">
  4. CSSでフォントを適応

    // YakuHanJP
    .yakuhanjp {
      font-family: YakuHanJP, "Hiragino Sans", Meiryo, sans-serif;
    }
    
    // YakuHanJPs
    .yakuhanjps {
      font-family: YakuHanJPs, "Hiragino Sans", Meiryo, 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;
    }
    

Custom

Font face

  1. 利用するフォントファイルへのリンクを個別に取得(CDNの場合)

  2. 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@2.0.0/dist/fonts/YakuHanJP/YakuHanJP-Light.eot");
      src: url("https://cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/fonts/YakuHanJP/YakuHanJP-Light.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/npm/yakuhanjp@2.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~

License

  1. Yaku Han JP : SIL OFL 1.1
  2. Author : Qrac
  3. Author Group : QRANOKO
  4. Gothic fonts : Based on Noto Sans CJK JP licensed under the SIL OFL 1.1
  5. Mincho fonts : Based on Noto Serif CJK JP licensed under the SIL OFL 1.1