Ace Editorで日本語が沈むのを解決する方法
17318 ワード
そもそも日本語が沈む現象とは？
上の画像のような現象です。
解決する方法
なお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/[email protected]/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Regular.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/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/[email protected]/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Regular.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/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/[email protected]/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Regular.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/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/[email protected]/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Regular.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/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/[email protected]/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Regular.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/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/[email protected]/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Regular.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/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/[email protected]/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Bold.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/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/[email protected]/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Bold.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/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/[email protected]/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Bold.woff") format("woff"),
url("https://unpkg.com/@neos21/[email protected]/NotoSansMonoCJKjp-Bold.otf") format("opentype");
}
この方法を取れば下の写真のようになると思います。
参考文献
[WEBフォントのCSS部分]http://neos21.hatenablog.com/entry/2018/11/19/080000
Author And Source
この問題について(Ace Editorで日本語が沈むのを解決する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/Lusaca/items/a287347c690ca339d730著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .