カテゴリ:
管理人より |
(2016.07.30 作成)
※AAは銀英伝のチュン・ウー・チェンです
, - ── - 、、
,.'"´ ``ヽ
,r'´.:.:..:.:.:.:. ,イ
/;;;;:;:;:;::::::::::::::.::.:. ,,、、-‐─ヾ:!
!;;;;;:;:;:;:;:. :.: .,、-‐'"´ リ 出張から帰ってきてブログを確認したら
ト、;;;;:;:;:;:;ィ´ , l
|:::::::::::::::〉 ,、z-ー''< r==ュ:!. AAがズレてて慌てましたよ
!.::r‐、::/ "´ ,ィテz:;/ {j;テz,:::{
ヾl ヘ ゙' i;;:. .::::| いろいろググって調べたらいろいろ解決策が
`ト、 , ,ィ _, ノ;;;;:.:.::!
l::/ハ / _ `,.:::,! 分かりましたのでまとめてみます
|! i ! ‐'ニ二ヽ.!::/
_」. ト、 ー.::::::/
/.:::::``ー- 、ヽ、 .:::::::/_
/.:::::::::::::::::::::i.::.:.:.ゝ---‐ <::::::.ヽ
_ _, イ.::::::::::::::::::::::::|⌒ヽー---┘!::::::::i
.:.::::::::::::::::::::::::::::::::::::::::::! ト、 |:::::::::L _
.::::::::::::::::::::::::::::::::::::::::::::ゝ---- ‐ ''"´.:::::::::::::::::::::`ー- 、
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.:.:`ー- 、、、
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
,,、-‐.:.::::::::::::::::::::::;:;ー- 、
,、.:;:;:;:彡三三三ミミヾ`、;:;:;:;:;`ヽ そもそもの原因はChromeのバージョンが52に更新されたことで
. /:;:;r'"´  ̄``ヾ,ノシシ''゙ヽ
|:;;/ _,, _ 丁.:.:.:.::::.ヽ. directwriteが強制ONになって無効化できなくなったことでした
l:;′ _,,,,,,,_ `` ノ.:.:.:.`t;;;;;:;j!
l:| rr='-─ ‐-ミ,、 〈.:.:.:.:.:.;;;ミミミ| 従来(バージョン51まで)は
ij,r==z j:;:;<:;テェェ- 、,, `i.:.:,r‐、;;ミミミ!
`1,ィr示j ;;:::.:.:.`''ー l;;;l ハ i! .:.l 『chrome://flags』を開き(アドレスに打ち込む)
i ``7 .;;:;:;::::.:. リ い リ.:.リ
| 〈 `ゞ、.: ,レ/.:.:/ ⇒『directwriteを無効にする』をクリックして表示を『有効にする』に変える
. ! `ー''"´ ヽ 、_, イ.:.:/
', ,,、 -─一 ,′.:l;;K ⇒再起動
. ゙、 Y´,.-一 / ,′リ
゙、 / ,' L_ でよかったのですが、この手が使えなくなりました
゙、 / ,,.、‐''"´ ヽ
ヽ、_、_, イ,,、‐''"´ .:.:::::::!ー- 、、 ※Chromeのdirectwrite機能には欠陥があって有効にしているとAAがズレる
_」_, イ;;:ヽ ,r''"´ヽ.:.:::::::::/.:.:::::::::::.
-‐'''"7´``7 /;:;:;;;;i ヽ _/.:.:::::/.:;:;;;;;;;:::::::
.:.:.::::::;:/ /l /.:;:;;;:;;;:l .:.:.::::::::::/.:;:;:;;;;;;;;::::::::::
:::::::;:;/ 〃1 /.:;:;;;;;;;;;;:l.:.:::::::::::::/.::;;;;;;;;;:;:;;;;;::::::::::
_,,、-''"¨;;;;;;;;;;;;;;;;;;;;;;;;;;`ヽ、
,.-';;;;;;;;;;;;;;;;;;;;;;;;;;__;;;;;;;;;;;;;;;\
/N/i〃, -''" `''ー-、;;ヽ Webフォント関係のミスという可能性も考えていましたが、
/;;;;;;;;;;;;r'´::::::: `i;;i
/;;;;;;;;;;;;;;ヽ::::::: |;;|.
AAまとめブログがスマートフォンで見れるようになるフォント設定のまとめとおまけと追記 ,';;;;;;;;;;;;;;;;;;;;):: _,,、_ ! |j
i;;;;;;;;;;;;;;;;;ノ::::〃ー--二ニノ i一--、i というツイッターまとめと
ヽr'´ヽ;;;f::::::::::<じ二ゞ:: イr_tィー、~ノ
l彳)ヽ:::::::::::: ::  ̄ f'
[サイト管理人向け]DirectWriteによるAAのズレを修正するスクリプト ヽヽ、i:::::::::::::: :::: ,'
\_,イ::::::::: ,.‐'く:、:: イ i . という記事を見つけました
/:::::|:i::::::::: i _ _ _ ヽ /
,rー''く::::::::i:\::::: 、`' ー ~ / keage様、ブログ型AAツール保管庫管理人◆WarsMahrLQ様、劇場風やる夫まとめ様、
/;;;;;;;;;;\::::i::::::\:: ` … /
_/;;;;;;;;;;;;;;;;;;\::::::::::::\:: /ヽ この場を借りまして感謝の意を表させていただきます。ありがとうございました。
ー'´;\;;;;;;;;;;;;;;;;;;;;;;`ヽ 、::::::ヽ、, _ ,,/;;;;;;;;\
;;;;;;;;;;;;;;;;\;;;;;;;;;;;;:;:;:;:;:;:;::`1Y'´ ̄`'Y⌒ヽ;;;;;;;;;;`'ト、_
;;;;;;;;;;;;;;;;;;;;;;\;:;:;:;:;:;:;:;:;:;;:;:||:.:.:. i:.: ヽ:;:;:;:;|:;;;:;;;:;``丶、
というわけで、AAのズレを修正するスクリプト(patchForAA)の導入手順を紹介。
1、
http://www1.axfc.net/u/3647668/yaruoより『patchForAA.js』をダウンロード
2、スタイルシートのフォントの設定(font-family)を修正して『patchForAA』を追加
例:font-family:
patchForAA, 'MS Pゴシック', 'MS PGothic', ... , Saitamaar, sans-serif;
※patchForAAは必ず左側に追加する(優先度を上げるため)
3、patchForAA.js をアップロードして以下をHTMLに追加
<script type="text/javascript" src="http://アップロードしたファイルのURL/patchForAA.js" charset="UTF-8"></script>
(2019.04.06 追記)
,..- ' ´ ̄ ̄``ヽ.、
,.' ´ _,.、-‐─ゝ、
,r'´‐''" ̄ア'iゞ"リ''´、.,,、-‐─‐i
!;:、_,.r'"´,'´`': ̄'゙ ,.、-‐──‐‐|
,!、_,.、-‐─''´、''"´ ,_,.、--─、! で、スクリプトを導入して2年半ほど使わせていただきましたが、
{‐'"´ _,.、-‐─''´ ̄``ー─-r;!`
. |}-‐'リ´_,.、-ー-、、,,_ ,;:',r=ニ=- i' どうしてもページの表示が遅い(ページ読み込み時に一瞬消えて適用されるetc)。
,!^ヾ,! ´ ̄`ーrテゝ'´ ,!'fェェ, l
{ (;;:l' ,;:: ,;'´ -‐ i゙ヽ , ;:: ! スクリプトを使用するとどうしてもこうなる(GoogleAdsenseやJavaScriptが他にあるならなおさら)
ヾ、 ;l、 ,;:';l
`ゞ ,.'´ ;;:r'ヽ ,;:'イ ようなので、やはり使えるWebフォントがあるならそちらのほうが負荷が軽いということで
,! ', ,r'´____, i ,'゙l'
,、-┤ i、 l 、_ l ,! Webフォント「Saitamaar」(製作者はkeage様)を使用することにしました。
./ ,(! l.`ヽ、 /
/ `ヽ、 \ /\. 「Saitamaar」は変色する現象(緑や紫)があり、条件がはっきりしないのですが、
,.、-‐ヘ、. /i、_,...._,i`ー─'‐─'i ,ヘ
\ ,/ l `ヾr-一、ヽl ,/ | このブログの設定(表示エリア横幅が1025px)なら変色しないようなので
_,,.、-‐''"´\/\ ,lヾ、 \、 ヽ,!/ 、 .l`‐、
,r'´ `|ヾ、 '` ,〈、 \l `ー-、_ 使用するか考えている人は一度現状の設定をバックアップ(複製)してから適用してください。
Webフォント「Saitamaar」の導入手順
1、スタイルシートに以下を追加
@font-face{
font-family: 'Saitamaar';
src: local('Saitamaar'),
url('http://keage.tokyo/fonts/Saitamaar.eot?') format('eot'),
url('http://keage.tokyo/fonts/Saitamaar.woff2') format('woff2'),
url('http://keage.tokyo/fonts/Saitamaar.woff') format('woff'),
url('http://keage.tokyo/fonts/Saitamaar.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
2、スタイルシートのフォントの設定(font-family)にSaitamaarを以下のように追加する。
例:font-family:
'Saitamaar', 'MS Pゴシック', 'MS PGothic', 'MS Pゴシック', 'MS Pゴシック', MSPゴシック, MSPゴシック, ・・・・・, sans-serif;
※注意:サイトのSSL化を考えている人はフォントをダウンロードして別のサーバに保存⇒そこのURLに置き換える必要があります。
DropBoxはhttpsに対応しています。
,.、-''"´ ̄ ̄`丶、
/ \
( 、 \
}'rー─── -、_`''rp、.., i
l;l `丶、 ,!
l;| `Yーイ こちらで現在Web上で公開されているアスキーアート表示用Webフォントが確認できます。
リ ,r=‐、 `ゝ==-、 ,!;;;:!
i,! ,rェァ;〉 ヾェュ-、` lrト,!
AAHub Fonts - アスキーアート表示対応フォント収集サイト l,! i :. ` k l
!l ,l ;:.、 ,r;/ . どのフォントを使用するかは一長一短だと思いますので、
`i /`^^´ヽ、 ,!,ソ
l、 ! ー‐‐-' ! /´ . どこかにお試しサイトを作成して試してみるのもアリだと思います。
r<l ',  ̄ ' ,イ
/ \ゝ / l`ヽ
/ ヾ´`ー─ '´_,、,! 〉、
_,.、-‐〈 / l'⌒ゞ'´7 ヾ、/ |_
_,,.、-‐''"´ヽ, \ / | `'´ヽ ,リ、_,」  ̄``rー-、_ ________
,r'´ ヽ ヽ _,r'´ヽ,/\ 」、 ,イ 7‐- 、_,! ! ̄`;、 \,,......,.,....,.,...,.,...,../
/ヽ, _〉,.、 -‐ ' ´ ヽi゙ゞ、,,. ` ー‐ '"´ ,イ'´ ``ー'-、_ ,/ヽ \:..::::.::...:::.:/
,! '、'´ |  ̄ `二二ニ'´レ'´ ` ヽ 、`! i \.:..:./
,! ゙:、 `l | [三ニ] `,l ! ,r‐;! l─-、
l ゙! _ ,,l ,|、 _ l/´,! / ,t') l人,r'
| ,i!` 、 ,、-‐''´ `、|``'ー-、、___,,、ィレi `'ー ‐--、 _,l,;' l ,! '´ レ'´ `,)
| |,- ─ ‐ ' ´ | | |; | ,! l 〉-‐'´)
| l | | ヽ 、レ゙´| /〉 ,ノ (_,r'´
゙i ! ! 、| ,イ l /〈 i´ l(二)
l! l | `、_|、,_ ,イ' !r'´{//ゝ、-=ニ二ニ=‐
リ !、 l|, ` '- 、__,、-|'ー-、_ _,/ / iトV//`t'7/
i ,|i゙i, ,ィ:;|```''ー-、、_,__,.ィイ|¨``'ー-、,__ l ,イ,! ,/`ヾ7_/,/〈
| ,リ,レ゙ヽ、 __,、-‐'´| ` `ゞ、 j|‐- ...,, ,!、,;:;,! / `ゝ /
(2020.02.29 追記)
,.:´.:.:::::::::::::::::::::::::::::::::::::::::::::::::::::::::.:.: 丶、
{.:.:::::::::::::::::::/`ヽ.:.::::::::::::::::::::::::::::::::::::::::::丶 裏屋敷サイトにてFirefoxだと「Saitamaar」が若干緑がかった色になる
'..:.::::::::::::::::::`ー':.:.:::::::::::::::::::::::::::::::::::::::::::::ノ
ヽ.:.::::::::::::::::::::::::::,. ´  ̄ ̄ ``i: : i´ という報告がありました。
}.:.i`゙""""""゙´ ,': : :i
i.:.:l ,.ィニニ''=ミ、 ヽー_----ミ、 i: : : l そこで「giko2」というWebフォントを上記の「AAHub Fonts」さんから
ヾ.j , ィテ.:歹 `テェテ-、 .l: : :ノ
い ´  ̄ ´,′ `  ̄ j.:/´ヽ ダウンロードして適用してみたら結構よさそうなので
{! / イ }
ぃ ,. イ{ ,:.、 レ' / こちらも「giko2」にしてみます。
j , `゙゙゙´ ヽ. /_ノ
,ハ -‐--ー- 、 j / ※適用方法は「Saitamaar」とほぼ同じ
, .:´,′ヽ ` ̄ ´ ,.イ、
/.:::::/ ゙、 / ;:::.`丶、
_/.:.:.:〈 ヽ ,;.. / .;.:.:.::::::::::L こっちのほうが軽いのかな?
/.:.::.:.:::::.:丶、__ `"""""´ ,ム.:.::::::::::::::::::::::.:. ̄
_/.:.:::::::::::::::::::::::::.:::.`ヽ _, - < `ヽ.:.:.:::::::::::::::::::.:.:.:. 何か問題ありそうなら↓コメント欄へお願いします。
.:.:.:::::::::::::::::::::::::::::::::::::.:.:「  ̄ ̄`ヽ `ヽ }.:.:.::::::::::::::::::::::.:.:.
.:.:::::::::::::::::::::::::::::::::::::::::.:.| : . ノ.:.:.::::::::::::::::::::::::::.:.
.:.:.::::::::::::::::::::::::::::::::::::::::::| ,. イ.:.:.:::::::::::::::::::::::::::::.:.:
・スタイルシートの記述内容
@font-face{
font-family: 'giko2';
src: local('giko2'),
url('https://アップロードしたurl/giko2.woff2') format('woff2'),
url('https://アップロードしたurl/giko2.woff') format('woff'),
url('https://アップロードしたurl/giko2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
・スタイルシートのフォントの設定(font-family)の記述
例:font-family:
'giko2', 'MS Pゴシック', 'MS PGothic', 'MS Pゴシック', 'MS Pゴシック', MSPゴシック, MSPゴシック, ・・・・・, sans-serif;