やる夫スレ自分チェック用

 

ブログでのアスキーアート表示用のWebフォント導入方法まとめ

カテゴリ:未分類 |


(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:.:  ヽ:;:;:;:;|:;;;:;;;:;``丶、
 
 
 
 
というわけで、ブログでのアスキーアート表示用のWebフォント導入手順を紹介。
 
 
・第1段階: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: 'MS Pゴシック', 'MS PGothic', 'MS Pゴシック', 'MS Pゴシック', MSPゴシック, MSPゴシック, IPAMonaPGothic, 'IPA モナー Pゴシック', 'IPA mona PGothic', 'IPA MONAPGOTHIC', Mona, Monapo, Saitamaar, sans-serif;
 
 
 
・第2段階:DirectWriteによるAAのズレを修正するスクリプトを導入
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>
 
 
 
           ,..- ' ´ ̄ ̄``ヽ.、
       ,.' ´      _,.、-‐─ゝ、
       ,r'´‐''" ̄ア'iゞ"リ''´、.,,、-‐─‐i
      !;:、_,.r'"´,'´`': ̄'゙ ,.、-‐──‐‐|
      ,!、_,.、-‐─''´、''"´ ,_,.、--─、!
     {‐'"´ _,.、-‐─''´ ̄``ー─-r;!`
.     |}-‐'リ´_,.、-ー-、、,,_ ,;:',r=ニ=- i'       / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
     ,!^ヾ,! ´ ̄`ーrテゝ'´  ,!'fェェ, l       |   「Saitamaar」導入のみだと、フォントの色が紫っぽくなったりしますが、スクリプト導入でフォントが黒くなります。
     { (;;:l'  ,;:: ,;'´ -‐    i゙ヽ , ;:: !       <   IE11とEdgeでも確認したかぎりでは問題ないようです。
      ヾ、           ;l、   ,;:';l        \_______________
       `ゞ        ,.'´ ;;:r'ヽ ,;:'イ
       ,! ',    ,r'´____, i ,'゙l'
     ,、-┤ i、   l   、_   l  ,!
    ./  ,(! l.`ヽ、         /
   /   `ヽ、  \       /\
,.、-‐ヘ、.     /i、_,...._,i`ー─'‐─'i  ,ヘ
    \  ,/ l   `ヾr-一、ヽl ,/ |
_,,.、-‐''"´\/\ ,lヾ、  \、 ヽ,!/ 、 .l`‐、
     ,r'´   `|ヾ、    '` ,〈、 \l  `ー-、_










カテゴリ:未分類 |
[ 2014/05/01 00:30 ] TB(-) | CM(0) | △ページトップへ戻る 
カテゴリ[ 未分類 ] 内一覧



関連カテゴリ
 

※「ねらう緒はトップヒーローを狙うようです」の投稿のうち、「やらない夫は独りだけの戦隊ヒーローのようです」とのクロス部分のみ「独り戦隊EXTRA」としてまとめます。

広告エリア


コメント一覧
コメントの投稿












管理者にだけ表示を許可する
プロフィール

Author:多摩ちゃん
自分で日々みているやる夫スレのまとめです。

三十路会社員です
リンクフリーです。
会社員ですので、更新は遅めです。

誤字・リンク切れetc連絡はメールもしくは
おしらせ・連絡のコメント欄にて

作品・作者に対する誹謗中傷及び
批判etc不快なコメントは削除します。
現在、コメントは承認制です。



2016.6.12
ついにアクセスカウンタが10万を突破しました。
ブログを始めて2年ほど経ちましたが、こうしてブログを
見に来てくれる皆様がいるおかげで続けられています。
いつも訪問していただいて本当にありがとうございます。



推奨ブラウザ:Chrome

注意:広告を表示させない「Adblock Plus」を
使用しているとAAがズレることがあるようです。
このブログでは「無効」としてください。



管理画面

全記事一覧を表示する

便利リンク(仮)

[管理者用記事編集]
広告エリア

BACK
HOME
↑TOP↑
COMMENT
アクセスカウンタ
人気ランキング
検索フォーム
リンク
■ポータルサイト
Yahoo!JAPAN
Google
ライブドアニュース

■AAスレまとめ
ブログ型AAツール保管庫
劇場風やる夫まとめ
やる模
AAまとめブログ(´∀`)
泳ぐやる夫シアター
やる夫の暇つぶし麻亜屈
AAスレお気に入りのまとめ
Yaruo Memory
やらない夫オンリーブログ
やる夫エッセンシャル
それにつけても金のほしさよ
やる夫叙事詩
やる夫疾風怒濤
やるやらブログ
やるぽん!
やるやら鍋
やるやら書庫
やるやらできやら
RPG系AA物語まとめるお
勝手にやる夫を纏めたりするブログ
暇な時にやる夫まとめ
やる夫我執 [愛と <●>-=≠=-<●> 誠編]
やる夫短編集 (,,`д`)<とっても!地獄編
やる夫短編集 (,,^ー゚)<すさまじい程に! あしゅら編
Yaruyomi
AA・やる夫文庫
俺とやる夫の理想郷
やる夫AGE
東方やる夫スレ纏め
やる夫道中記
やる夫達のいる日常
隣のAA
やる夫とイワナ
やるならやらねば!!
やる夫が人生でいいじゃない
好き好き大好きやる夫くん

■まとめのまとめ
やる夫RSS+インデックス
やる夫 Wiki
やる夫見聞録
やる夫Link
R18やる夫.com
やる夫スレキャラクター出演作まとめwiki
やる夫電脳インデックス

Textar Font - アスキーアート対応ウェブフォント

やらない夫は独りだけの戦隊ヒーローのようですwiki
独りだけのAA活動写真館

童帝作品まとめ(仮)wiki

■ニュースまとめ
Birth of Blues
保守速報
黒マッチョニュース
U-1速報
キムチ速報
アルファルファモザイク
おーるじゃんる
暇人速報
政経ch
あじあにゅーす2ちゃんねる
ハムスター速報
News U.S. - 中国・韓国・在日崩壊ニュース
みそぱんNEWS
ネトウヨにゅーす
大鑑巨砲主義!
とりのまるやき
もえるあじあ(・∀・)

随時編集中
広告エリア