CSS3では 袋文字を表示可能になったけど、まだブラウザが完全に対応せず。
サファリはCSS3対応とか発表してたみたいだけど、アレは嘘。まだまだ、かなり対応してないです。傍点も まだだし。で、いずれは設定しますが、その前に、以前からの...テキストシャドウを使った擬似的なもので、色調とかのバランスを補正
覚え書きです。
いつも通りCSSで。
.section p { line-height: 1.8; /* 折り返し行（改行しない） の上下の幅 1.4 1.75 1.8 1.9*/ font-weight: normal; text-indent: 0em; word-spacing: 0.1em; /* 単語間 */ letter-spacing: 0.07em; /* 文字間 0 0.04 0.06 0.07 0.2*/ /* font-size: 100%; */ ruby-position:before; margin-bottom: 0.9em; /* 0.55em 〜 0.9 */ margin-top: 0.9em; /* 上と同じ */ font-family: "Capanito-Medium","Capanito","キャパニト", "HiraMaruProN-W4","HiraMaruPro","ヒラギノ丸ゴ Pro", sans-serif; color:#595959; /* color:#86BEFF; */ /* text-shadow: 2px 2px 1px #b3dbff; */ text-shadow: /* 白い縁取り ffffff,CCE0FF */ 1px 1px 0px #ffffff, 1px -1px 0px #ffffff, -1px -1px 0px #ffffff, -1px 1px 0px #ffffff, /* 影 縁取り #,86BEFF,c0c0c0 全方向 2px 2px 2px #c0c0c0, 2px -2px 2px #c0c0c0, -2px -2px 2px #c0c0c0, -2px 2px 2px #c0c0c0 */ /* 影 縁取り、右と下のみ */ 2px 2px 2px #c0c0c0, 2px 0px 2px #c0c0c0, 0px 2px 2px #c0c0c0 ; }
コメント部分には、他に良さそうなのを覚え書き。
見た目の違いを調節するのが面倒になったので止めました。
流石にfirefoxでのキャパニト表示を１年以上悩み続けた事に反省。Ver.3からVer.9までも上がったけどもう待っても無理でしょう。だから、そういうブラウザとかの対応を待つのは止めました。
- 色合いは、webセーフカラーを無視！！
だって、微妙な色合いが出せないんだもん😁（〃▽〃）＜（笑）...でも、いまでは、相当レガシーな機械でも使ってない限り再現出来るんじゃ無いのかな。firefoxでも、それほど違わないです。
しかし色以外は、環境が違うと全く見た目が変わると思う。
ボクの環境は、マックでサファリです。サファリ以外だと、かなり見た目が変わります。さらに、フォント...キャパニトに合わせてます。
同じ文字を持ってても...例え同じマックでも、ブラウザが違うと文字が変わったりして。何気に機種依存文字も紛れ込ませることにしました。*1ここでも紛れ込ませてます😜。
袋文字も対応次第切り替えます。
*1:絵文字です。マックにサファリなら、フォント設定に関わらず表示
