【CSS】Google APIフォント

CSSでフォントにボーダーをつけます

by tea4two

HTML

<!--GooleFontの読み込み設定-->
<link href='http://fonts.googleapis.com/css?family=Istok+Web:700' rel='stylesheet' type='text/css'>

<!--ロゴ画像をGoogle APIフォントサービスで切り替え-->
<h2 id="logo4"><a href="#">SAMPLESITE<span class="sub">WEB CLASS HTML CSS TEMPLATE</span></a></h2>

CSS

h2 {
    border: 1px solid #ccc;
    width: 200px;
    position: absolute;
    top: 20px;
}
h2 a {
    text-decoration: none;
    text-shadow: 2px 2px 0px #fff,
        2px -2px 0px #fff,
        -2px 2px 0px #fff,
        -2px -2px 0px #fff,
        0px 0px 8px #5c5c5c;
    color: #666;
}
h2#logo4 {
    left: 20px;
    line-height: 0.8em;
    font-family: 'Istok Web', serif;
    font-size: 2em;
}
h2#logo4 .sub {
    display: block;
    text-align: justify;
    text-justify: distribute-all-lines;
    font-size: 35%;
}