【私的】Windows フォントのテストだYO！【ヒンティング削除】

2021.4.1 移転しました...

• このページの旧URLは
  • http://www10.plala.or.jp/palm84/css_memo_font_unhint_test_utf8.html

ヒンティングを無効化したM+フォントなどをなんとかきれいに表示させてみるテストです...

INDEX

about

サイドバー表示 on/off

• サイドバーを下に (画面を広げる)
• 戻す

下記ページ内容についてのテスト用ページです。

• Firefox69でヒンティングを無効化した「Migu 1C」を使うテスト
• Firefox69でヒンティング無しのRobotoJフォントを使うテスト

テーブル表示

フォントを指定して表示 - クリックで表示オン/オフ

font-family	\	ゼロ	O	iI	l	Q	Windows	プブ	あいうえお	漢字	カ力エ工ロ口ー一ニ二
無指定	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Sans-serif	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Serif	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Monospace	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二

※ 完全じゃないです。font-family:フォント名,serif と指定してます。指定フォントがない環境では Serif 設定のフォントで表示されます。

• -webkit-text-stroke-width 削除 | 0 | 0.1px | 0.2px | 0.3px
• text-shadow 削除 | none | 0 0 1px rgba(0,0,0,0.1),0 0 2px rgba(0,0,0,0.01),0 0 3px rgba(0,0,0,0.01) |
                    0 0 0.1px rgba(51,51,51,0.5) | 0 0 0.1px rgba(0,0,0,0.5) | #707070 0.05px 0.05px 0.05px |
                    transparent 0 0 0,rgba(0,0,0,0.5) 0 0 0 | 0px 0px 1px #acacac
• color 削除 | #555 | #333 | #111 | #524336 || background-color 削除 | #ffc | #ffd | #ffe
• font-weight 削除 | 500 || line-height 削除 | 1 | 1.1 | 1.2 | 1.5 | 2 || letter-spacing 削除 | 0 | 1px | 2px

font-family	\	ゼロ	O	iI	l	Q	Windows	プブ	あいうえお	漢字	カ力エ工ロ口ー一ニ二
無指定	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
ＭＳ Ｐゴシック	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Meiryo UI	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
游ゴシック Medium	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
游ゴシック w500	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Yu Gothic UI	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
UD デジタル 教科書体 NP-R	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
BIZ UDPゴシック	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
メイリオ	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Migu 1C	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
M+ 1c Unhinted	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Migu 1C Unhinted	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Migu 1C ttfmod	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
RobotoJ	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
RobotoJ_Hint	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
RobotoJAA	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
RobotoJ_otf	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二
Migu 1C otf	\	0	O	iI	l	Q	Windows	プブ	あいうえお	葛噌一三埒彅漢字片	カ力エ工ロ口ー一ニ二

表示テスト

• -webkit-text-stroke-width 削除 | 0 | 0.1px | 0.2px | 0.3px
• text-shadow 削除 | none | 0 0 1px rgba(0,0,0,0.1),0 0 2px rgba(0,0,0,0.01),0 0 3px rgba(0,0,0,0.01) |
                    0 0 0.1px rgba(51,51,51,0.5) | 0 0 0.1px rgba(0,0,0,0.5) | #707070 0.05px 0.05px 0.05px |
                    transparent 0 0 0,rgba(0,0,0,0.5) 0 0 0 | 0px 0px 1px #acacac
• transform 削除 | rotate(0.001deg) | rotate(0.01deg) | rotate(0.03deg) | rotate(0.05deg) || background-color 削除 | #ffe
• color 削除 | #555 | #333 | #111 | #524336 || background-color 削除 | #ffc | #ffd | #ffe
• font-weight 削除 | 500 || line-height 削除 | 1 | 1.1 | 1.2 | 1.5 | 2 || letter-spacing 削除 | 0 | 1px | 2px

0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
新しい朝が来た！不埒な草彅剛、髙濱、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、髙濱、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、髙濱、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。
味噌汁 - Wikipedia

• 削除
• メイリオ
• Meiryo UI
• ＭＳ Ｐゴシック

• 游ゴシック
• 游ゴシック Medium
• Yu Gothic UI
• 源ノ角ゴシック

• Migu 1C
• M+ 1c Unhinted
• Migu 1C Unhinted

• RobotoJ
• RobotoJ_Hint
• RobotoJAA
• RobotoJ_otf

• BIZ UDPゴシック
• UD デジタル 教科書体 NP-R
• Textar

ブックマークレット

* {
font-family: RobotoJ !important;
}
pre,code,kbd,var,samp,pre.code,pre span.synComment,del {
font-family: monospace,monospace!important;
}
.synConstant,.synIdentifier,.synSpecial,.synStatement,.synType {
font-family:inherit!important;
}

• style削除(x1)

• メイリオ
• Meiryo UI
• 游ゴシック
• 游ゴシック w500
• 游ゴシック Medium
• Yu Gothic UI
• ＭＳ Ｐゴシック

• Migu 1C
• M+ 1c Unhinted
• Migu 1C Unhinted

• RobotoJ
• RobotoJ_Hint
• RobotoJAA

• RobotoJ_otf
• Migu 1C otf

• BIZ UDPゴシック
• UD デジタル 教科書体 NP-R
• Textar
• 源ノ角ゴシック

• Migu 1M (pre,etc)
• Migu 1M Unhinted (pre,etc)
• M+ 1m Unhinted (pre,etc)
• RobotoJ Mono (pre,etc)
• RobotoJ Mono Hint (pre,etc)

-webkit-text-stroke, text-shadow, transform

function(){
var style=document.createElement('style');
var head=document.getElementsByTagName('head');
style.setAttribute('type','text\/css');
style.innerHTML='body{-webkit-text-stroke-width:0.1px !important;}';
head[0].appendChild(style);})();

• style削除(x1)
• stylish なし

• ＭＳ Ｐゴシック を Textar に置換

• 0 || body{-webkit-text-stroke-width: 0.1px !important;}
• body{-webkit-text-stroke-width: 0.15px !important;}
• body{-webkit-text-stroke-width: 0.2px !important;}
• body{-webkit-text-stroke-width: 0.3px !important;}

• none || body{text-shadow:0 0 1px rgba(0,0,0,0.1),0 0 2px rgba(0,0,0,0.01),0 0 3px rgba(0,0,0,0.01) !important;}
• body{text-shadow: 0 0 0.1px rgba(51,51,51,0.5) !important;}
• body{text-shadow: 0 0 0.1px rgba(0,0,0,0.5) !important;}
• body{text-shadow: #707070 0.05px 0.05px 0.05px !important;}
• body{text-shadow: 0px 0px 1px #ACACAC !important;}
• body{text-shadow:0.5px 0.5px #ccc !important;}

• none || body{transform: rotate(0.001deg);}
• body{transform: rotate(0.03deg);}
• body{transform: rotate(0.05deg);}

0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz
日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁を

• none || body{transform: rotate(0.001deg);} img{transform: rotate(0deg)!important;}
• body{transform: rotate(0.03deg);} img{transform: rotate(-0.03deg)!important;}
• body{transform: rotate(0.05deg);} img{transform: rotate(-0.05deg)!important;}

下記は body 要素に style 属性を追記

function(){
document.getElementsByTagName('body')[0].style.setProperty('transform','rotate(0.01deg)','important');})
();

• 戻す
• transform: rotate(0.01deg)
• transform: rotate(0.03deg)
• transform: rotate(0.05deg)

備考

最終更新日：2019.07.29

2019.07.29 作成。

ダウンロード・リンク

• Miguフォント : M+とIPAの合成フォント

• RobotoJ-Font プロジェクト日本語トップページ - OSDN

• 【Fontforge】ブラウザやElectron系ソフトで表示される文字がガビガビになってる時の解決法と、ヒンティングについて感じたこと - Qiita
  • Unhinted M+ - Chone(こーね)

• FontForge Open Source Font Editor
• メイリオ・meiryoKe・ttfname3

---

ほなでした。

---