More than 5 years have passed since last update.

Ace Editorで日本語が沈むのを解決する方法

Last updated at 2019-08-30Posted at 2019-08-30

そもそも日本語が沈む現象とは？

上の画像のような現象です。

解決する方法

なおHTML部分は省略しています。
###Before

var editor = ace.edit("container");
editor.$blockScrolling = Infinity;
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
editor.setFontSize(14);

After

Editor.js

var editor = ace.edit("container");
editor.$blockScrolling = Infinity;
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
editor.setFontSize(14);
editor.setOptions({
    fontFamily: "Noto Sans Mono CJK JP"//フォントファミリーを指定する。
});

@font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 100;
    src: local("NotoSansMonoCJKjp-Regular"),
         local("Noto Sans Mono CJK JP Regular"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
  }
  @font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 200;
    src: local("NotoSansMonoCJKjp-Regular"),
         local("Noto Sans Mono CJK JP Regular"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
  }
  @font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 300;
    src: local("NotoSansMonoCJKjp-Regular"),
         local("Noto Sans Mono CJK JP Regular"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
  }
  @font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 400;
    src: local("NotoSansMonoCJKjp-Regular"),
         local("Noto Sans Mono CJK JP Regular"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
  }
  @font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 500;
    src: local("NotoSansMonoCJKjp-Regular"),
         local("Noto Sans Mono CJK JP Regular"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
  }
  @font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 600;
    src: local("NotoSansMonoCJKjp-Regular"),
         local("Noto Sans Mono CJK JP Regular"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
  }
  @font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 700;
    src: local("NotoSansMonoCJKjp-Bold"),
         local("Noto Sans Mono CJK JP Bold"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.otf")   format("opentype");
  }
  @font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 800;
    src: local("NotoSansMonoCJKjp-Bold"),
         local("Noto Sans Mono CJK JP Bold"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.otf")   format("opentype");
  }
  @font-face {
    font-family: "Noto Sans Mono CJK JP";
    font-weight: 900;
    src: local("NotoSansMonoCJKjp-Bold"),
         local("Noto Sans Mono CJK JP Bold"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.woff")  format("woff"),
         url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.0/NotoSansMonoCJKjp-Bold.otf")   format("opentype");
  }

この方法を取れば下の写真のようになると思います。

参考文献

[WEBフォントのCSS部分]http://neos21.hatenablog.com/entry/2018/11/19/080000

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up