2016年10月19日水曜日

AAをスマホで表示する

このエントリーをはてなブックマークに追加

誰得メモ

スマホでも上手く表示するための AAを貼り付けるためのスタイルです。@kægeさんありがとう。

@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; 
}
.aa{
    background: #fafafa;
    border: 1px solid #cccccc;
    color: #333;
    font-weight:normal;
    font-family:Saitamaar, sans-serif;
    font-size:5pt;
    line-height:1.1;
    text-align: left;
    margin: 0;
    padding: 0;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

後は、AAをpreタグ内貼り付けて、クラス名にaaを付ける。
クラス名は各自お好きなようにどうぞ。
上手く表示出来ない時は、font-sizeを適当にいじってください。10pt~14ptあたりお薦め。

実際のテスト

             /::7ヽ '": : : : : : : : : : : : : : : : : :` 、   r─‐┐
               /:://: : : : : : : : : : : : : : : : : : : : : : : :ヽ l::::/:::::l
               /::/: : : : : : : : : : : : : : : : : : : : : : : : : : : : :`l::::rヘ:::l
           /::/: : :/: : : : : :.,ィ: : : : : : : : : : : : : : : : : : : l/: : : :ヽ
            /:l/:./: : : : : : : / l: : : : : l: : : : : : : : : : : : : : :.l: : : : : ヽ
            /: /: : : : : : : : :/  l: : : : : ト: : : : : : ┛┗: : : :l l: : : : : : :',
.           /: :l: : : : : : : : : :/   l: : : : : l ヽ: : : : ┓┏: : : :l: :l: : : : : : :',
         /: : :l: : : : : : : : :/ヽ   ',: : : : :l. \: : : : : : : : : :ト、 l: : : : : : :.',
.        /: : : :l: : : : : : : :/  \  ',: : : :.!/ \: : : : : : : :l:::〉l: : : : : : : :',
       /: : : : :l: : : : : : :/ r─- 、ヽ \: :l r──r┐: : : : : l/ l: : : : : : : :.',
        /: : : : : :',: : : : : :.l l. l::::::::::〉   ヽl. ',::::::::::!/l: : : : : :.l  l: : : : : : : : :',
.     ,': : : : : : : ', : : : : :ハ  ヽ:::::/       ヽ::::ノ !: : : : :./   !: : : : : : : : :',
      ,': : : : : : : : :ト、: : :.l: l      '        l: : : : /    l: : : : : : : : : ',
.     ;: : : : : : : : : l \: l: ヽ             イ: :/l/     l: : : : : : : : : :',
     i: : : : : : : : : :l   ヽハ:| ヽ、   ─(      , l: /        l: : : : : : : : : : ',
    l: : : : : : : : : : !     l   i゙`;,,、、__ ,,.. - .::..´_;_l/-,       l: : : : : : : : : : ',
.    l: : : : : : : : : : l       r゙!:.!;,;;i゙、|. .:;.-‐_''"-‐ ''´l,         !: : : : : : : : : : :',
    l: : : : : : : : : : :!     _,..-'--゙ート,゙!:.,' /´:::.::::.:.._;;ノ゙┐     .l: : : : : : : : : : : ',
.   l: : : : : : : : : : :l  _,,..-''"     r 'イl.,' ,' _.:.. -:.:'.:. :::::::`ヽ、     l: : : : : : : : : : : : ',
   l: : : : : : : : : : :.l ,! ,'       ゞ_ソ'=!゙:.:... . ...       \   l: : : : : : : : : : : : ',
   l: : : : : : : : : : :.l .,! .l :.' .:.  _, -'ニ-'゙ゞ;,ノ            `、 l: : : : : : : : : : : : :',
.   l: : : : : : : : : : : l ,| !:.'r=1-_,..-''´           :.      .::゙、 l: : : : : : : : : : : : :',
.   l : : : : : : : : : : :/:゙!.:|;,..{rヲ,゙             :.'  ,.ィ   _,,.:.:.:゙!l: : : : : : : : : : : : : ,
.   l: : : : : : : : : : :,' .::;!/゙´ヾ-'   .:.. .. .        l; ::.:'' _,.-''"_,,....,..゙i: : : : : : : : : : : : : '
.   l: : : : :,.- : .,,_,' ::/                 ,';.',-''"_,..::'":.:.:::;':.,!: : : : : : : : : : : : : :'
.   l: : : : i゙_二_,.`` Y      ...   .        l;/ ,.-'"  .. :.:.:;'ノl: : : : : : : : : : : : : : '
    l: : :i゙_,,...ィ   ゙!:::::..:.. .. .:.:..:::. .::. . .        ,!'´    . .:.::./   l: : : : : : : : : : : : : : : '
    l: : :゙! 、,,.、   .゙、:::::::::::::::::.:.::::::::.. .:.. .    .. .:/     .:..:.::/   l: : : : : : : : : : : : : : : :'
   l: : : ゙、l゙、.i    ゙、::::::::::::::::.: :.:::::::::::.:.:.:.. .. .:..:::/     .:::.,.'     l: : : : : : : : : : : : : : : ',
   l: : :         ` 、   ... :.:.:::::::::::::::::::::::/     ..:.;.'    .l: : : : : : : : : : : : : : : ',

0 件のコメント :

コメントを投稿