フィルタータグを使うとフォントが変わります
今、趣味のサイトをHTMLからXHTML+CSSに書き換えている最中です。
素人ですが、参考書片手になんとか頑張っています。
テキスト主体のサイトなのですが、背景画像が目立つと読みにくいため、テキスト部分にフィルターをかけようと思い、ページを作成しました。
同時にメッシュのような小さい画像を敷き詰めて背景を透過させるページも作りました。
どちらが読みやすいか比較するためです。
比較して気づいたのですが、両方ともフォントの指定は同じにしているにも関わらず、数字のフォントが違っています。
フィルターを使った方があまり見たことのないようなフォントに変わっているのです。
タグに書き落としがあるのかと思ってチェックはしてみたのですが、それらしき落ちは見つかりませんでした。
ひょっとしてブラウザのバクということでしょうか？
それとも何か根本的な勘違いをしているのでしょうか？
WinXP・IE7とWin7・IE8で比較しましたが、やはり表示は違っていました。
下記にそれぞれのソースを掲載しました。おかしなところがあればご指摘をお願いします。
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<link rel="stylesheet" type="text/css" href="1.css" media="screen,print" />
</head>
<body>
<div id="page">
<h1><img src="n1_image/logo.jpg" width="217" height="43" alt="My Web Site" /></h1>
<div id="main">
<h2>タイトル</h2>
<p>あいうえおかきくけこさしすせそたちつてと123456789</p>
</div><!-- main end -->
<div id="comment">
<p>あいうえおかきくけこさしすせそたちつてと123456789</p>
</div><!-- comment end -->
</div><!-- page end -->
</body>
</html>
【メッシュ画像使用_CSS】
@charset "UTF-8";
/*---------- BASIC ----------*/
* {
margin: 0;
padding: 0;
}
* {
font-family: sans-serif;
color: #000;
letter-spacing: 1px;
}
body {
background-color: #fff;
background-image: url(../n1_image/bg_sakura_1.jpg);
background-repeat: repeat;
background-attachment: fixed;
text-align: center;
}
img {
border: none;
}
br {
letter-spacing: normal;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
font-size: 100%;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #000;
}
a:visited {
color: #000;
}
a:hover {
color: #000;
text-decoration: underline;
}
a:active {
color: #000;
text-decoration: underline;
position: relative;
top:1px; left:1px;
}
/*---------- LAYOUT ----------*/
div#page {
width: 720px;
margin: 0 auto;
background-image: url(../n1_image/bg_wpage.gif);
text-align: left;
}
div#main {
width: 680px;
padding: 0px 20px 0 20px;
}
div#comment {
width: 520px;
padding: 35px 100px 0 100px;
}
/*---------- PAGE ----------*/
div#page h1 {
padding-top: 75px;
padding-left: 251px;
}
/*---------- MAIN ----------*/
div#main p {
line-height: 1.7;
}
div#main span.line {
text-decoration: line-through;
}
div#main h2 {
padding: 50px 0 50px 0;
text-align: center;
letter-spacing: 5px;
}
/*---------- COMMENT ----------*/
div#comment p {
line-height: 1.7;
font-size: 88%;
}
【フィルター使用CSS】
上記の
div#page {
width: 720px;
margin: 0 auto;
background-image: url(../n1_image/bg_wpage.gif);
text-align: left;
}
の部分を
div#page {
width: 720px;
margin: 0 auto;
text-align: left;
background-color: #fff;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
に変更しただけです。
よろしくお願いします。
お礼
自作なんですね。 ubermensch体ですか… いいのがなければがんばろうと思います。