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

## そもそも日本語が沈む現象とは？
![Screenshot from 2019-08-31 07-07-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285513/0593ae98-6ae4-3854-5484-564b9925fb3c.png)
上の画像のような現象です。
## 解決する方法
なおHTML部分は省略しています。
###Before
``` javascript
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

``` javascript
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"//フォントファミリーを指定する。
});
```

``` css
@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");
  }
```
この方法を取れば下の写真のようになると思います。
![Screenshot from 2019-08-31 07-13-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285513/b6277052-e1a5-9eec-026f-b01244bb3c5e.png)

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