« Prev || 1 | 2 || Next »

webフォントがFireFoxとOperaで表示されてなかった。

カテゴリー
css
投稿者
nonukes
コメント
書く

ご無沙汰しております。

お仕事が忙しくて、しばらく放置しておりました。

気が付きゃ前回のエントリーから早や1ヶ月。

ウェブフォント(Web Font)について。”という記事から更新していなかった。

その時はChromeとIEで確認してともにウェブフォントが正しく表示されていたので“ヨシ”としていた。

で、たまには気分を変えてFireFoxで閲覧しようとしたら、、、

超ゴシック体。

バージョンは2012年6月26日現在で最新バージョンの13.0.1。

ちなみにOpera(ver.12.00の最新版)で確認しても、ダメ。

Safari(ver.5.1.7)はOK。

なぜ?

早速ググってみたところ。

CSS◆WebFontsがFireFoxで表示されなかった件。
http://wood-built21.net/mytips/oboegaki/archives/2011/0714_140355.html

ここでは、フォント指定のURIがクロスドメインになっていたことが問題だったみたいだが、当サイトは違う。

しばらくワケが分からなかったが、ふとIE用のウェブフォント指定とその他のモダンブラウザ用のウェブフォント指定の順番を入れ替えてみた。

@font-face { /* for IE */
  font-family: 'あんず文字';
  src: url("/font/APJapanesefont.eot");
}

@font-face { /* for IE(>=9), Firefox(>=3.6), Safari(>=5.1), Chrome(>=6), Opera(>=11) */
  font-family: 'あんず文字';
  src: url("/font/APJapanesefont.woff") format("woff");
}

、、、ちゃんと表示されたよorz。。。

どうやらFireFoxとOperaでは、この順番を逆にするとwoffフォントがあとから読まれるIE用のeotフォントに上書きされるみたい。

ググっても、このことはあんまり重要視されていないみたいだけど、、、単なるボクのググり不足?

まあ、どっちにせよ解決したからいっか。

ウェブフォント(Web Font)について。

カテゴリー
css
投稿者
nonukes
コメント
書く

ちょっと前から、このサイトのフォントが変わっていることにお気付きだろうか。

どうみても“明朝”や“ゴシック”ではないので、気付くわな。

一般的に、ウェブサイトのフォントはOSにインストールされているフォントに依存する。

ちょっと前までは、特定のフォントを使いたい場合、画像化するしか手段がなかった(よね?)。

ところがどっこい、このサイトで使用されている文字は、画面上部のバナー部分を除いてすべてテキストである。

どうしているのかって?

スタイルシートを使っているのです。

スタイルシート、万歳。

なんだかホントに、すごい勢いで進化していくよね、ウェブの世界って。

乗り遅れないよう、必死です。

で、乗り遅れないように、自分のサイトでウェブフォントを試してみました。

»Read More

CSS3のgradientを簡単に生成できるスグレモノ。

カテゴリー
css
投稿者
nonukes
コメント
書く

前回CSS3のグラデーションについて書いたので、今日はそれに関連した簡単なtips。

タイトルにもあるように、CSS3のgradientを簡単に生成できるスグレモノをご紹介。

Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/

ultimate_css_gradient_generator.png

画像が少し小さくて見えにくいと思うが、直感的なインターフェイスで簡単にグラデーションのCSSコードを吐き出してくれるウェブサイト。

background: #cedbe9; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cedbe9), color-stop(17%,#aac5de), color-stop(50%,#6199c7), color-stop(51%,#3a84c3), color-stop(59%,#419ad6), color-stop(71%,#4bb8f0), color-stop(84%,#3a8bc2), color-stop(100%,#26558b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* IE10+ */
background: linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

こんなコード、手書きではとてもじゃないがムリ。

残念ながらIEでは表現しきれないので、ご覧になるならIE以外のブラウザでどうぞ。

ぐらでーしょん♪

今日はここまで。

IE9でCSS3にちょっとハマった。

カテゴリー
css
投稿者
nonukes
コメント
7件

~前回のあらすじ~

IE8以下でもCSS3を!

そんな願いを叶えてくれるドラ○もん的なライブラリがこの世に数多と存在する。

その中の一つが、“CSS3 PIE”なのである。

ひゃっほい!

なぜだかテンション↑↑である。

これで念願の角丸が、、、!

、、、あれ?

一部、角丸にならないぞ?

、、、あれあれ?

グラデーションをかけようと思ったら、IE9でのみ効かないぞ?

、、、あれあれあれ?

なんでやね~~~~ん!!!!!!

さて。

今回はその続きである。

»Read More

CSS3 PIEを使ってみた。

カテゴリー
css
投稿者
nonukes
コメント
書く

前回の記事“たまにはhtml5+CSS3について。”で触れたように、近年HTML5 CSS3でのコーディングが増えてきている。

このサイトもそうだが、ボクはこれまでずっとXHTML 1.0 Strictにこだわってコーディングを続けてきた。

予備校の一化学講師(ボクね)が“ビョーキ”になり、授業ができなくなったことでいきなりウェブ担当となったのだが、何を隠そう我が家にはいわゆる“ネット環境”なるものがなかったため、インターネットなるものにもほとんど触れたことがない人間がHTMLもCSS(当時はCSSなんてほとんど使わず、テーブルレイアウトが主流だったが)なんてものが分かるはずもなく、前任者が残したソースの“日本語部分”をただ書き換えるだけ、ってなカンジで遣り繰りすること数か月、これじゃイカンということで一年勃起もとい一念発起してネットの記事や書籍を読み漁り、どうやらこれからの時代はXHTML+CSSの時代だと悟り、それならばXHTMLを究めてやるということで半年ほど独学で勉強しまくり、ウェブ担当となって1年が経とうという頃にXHTML+CSSでこれまでのサイトを完全リニューアルし、HTMLとCSSは大体身に着いたから次は何だろうと考えたときに当時の各種申込フォーム(これまた前任者がperlで書いたもの)がなんだかショボかったため、そうだこれを何とかしようと考えてプログラミング言語を調べたところphpというものの存在を知り、perlよりもhtmlとの親和性が高く初心者にも習得しやすいというところに惹かれてphpを独学で勉強しまくり申込フォームを作り直し、その後マイページを作るということになってphpでのコーディングに没頭し、ほぼ完成間近というところで“ビョーキ”が再発し、約1年の休職期間を経て今度は別の会員制サイトを手掛けることとなり、phpとMySQLとの連携もほぼ身に着いた辺りでそれが最近ようやく一段落ついたため、改めて世間の動向を調べたところどうやらいつの間にかにXHTMLの時代は去りつつあり、HTML5+CSSの時代が到来していることに気が付いたのだが、ボクのこの仕事の原点は“XHTMLを究める”ということだったし、特に以前市場のシェアが高いIEがHTML5の実装にかなり遅れをとっているということもあり、いやいやまだHTML5は早かろうと自分自身に言い聞かせ、まだしばらくはXHTMLで十分でしょうと考えていたのである。(お疲れ様)

»Read More

« Prev || 1 | 2 || Next »
track feed