« フォントあれこれ | メイン | “ノ・メ・モ・ハ”… の文字化け »

CSS で作ったフォント

css-font-pointline.png
CSS のみで作られた「フォント」。文字でも画像でもない。ゆえに、アドレス収集ボットに捕獲されません。グッドアイデア賞ですね！

CSSplay：A CSS font さんのソースを見てください。（著作権：私の許可を求めないで、ウェブサイトでこの方法を使用することができます。）※各文字指定のスクリプトはフォネティックコードで記述されています。5段のボックスで1文字を表現しています。

css-font-cell-slash.png slash や colon 、hyphon 、underline を作ってみました。
lw指示、lv指示（勝手に命名）がなかったので追加した。

★ css に赤字スクリプトを追加する
.la, .lz, .lv {width:5px;}
.le, .lf, .lw {width:4px;}
.ld, .lf, .lh, .lk, .li, .lm, .lo, .lp, .lq, .lw {border-right:1px solid #000;}
* html .lw {width:5px; w\idth:4px;}

★表現文字スクリプト
: 【colon】
<div class="outer" title="colon"><div class="lg"></div><div class="lg"></div><div class="lz"></div><div class="lg"></div><div class="lg"></div></div>

/ 【shash】
<div class="outer" title="slash"><div class="lw"></div><div class="lp"></div><div class="lh"></div><div class="lq"></div><div class="le"></div></div>

- 【hyphen】
<div class="outer" title="hyphen"><div class="lz"></div><div class="lz"></div><div class="la"></div><div class="lz"></div><div class="lz"></div></div>

_ 【underline】
<div class="outer" title="underline"><div class="lv"></div><div class="lv"></div><div class="lv"></div><div class="lv"></div><div class="la"></div></div>

これがcss文字表示例


☆GiGAZiNE：CSSで作ったフォント 経由

css font の css スクリプト

<style type="text/css">

/* ======================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssfont.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
====================================================== */

#info p {margin-left:15px;}

.outer {display:block; width:5px; height:10px; float:left; margin:1px; background:transparent;}

* html .outer {height:12px; he¥ight:10px;}
.outer div {display:block; overflow:hidden; height:2px;}

* html .outer div {float:left;}

.la, .lz, lv {width:5px;}
.lb, .lc, .ld, .lg, .ll, .ln, .lq, .lt {width:1px;}
.lh, .lm, .lo, .ls {width:2px;}
.li, .lk, .lr, .lp, lj {width:3px;}
.le, .lf, .lw {width:4px;}
.la, .lr, .lt {background:#000;}
.lz {background:transparent;}
.lh {margin-right:1px;}

.ld, .lf, .lh, .lk, .li, .lm, .lo, .lp, .lq, .lw {border-right:1px solid #000;}
.ld, .le, .li, .lm, .ls {border-left:1px solid #000;}
.lc {border-right:4px solid #000; background:#ccc;}
.lb {border-left:4px solid #000; background:#ccc;}
.lg, .ln, .ls {border-right:2px solid #000;}
.lj {border-right:1px solid #ccc; border-left:1px solid #ccc; background:#000;}
.ll, .ln, .lo {border-left:2px solid #000;}

* html .lb, * html .lc {width:5px; w\idth:1px;}
* html .ld, * html .lg, * html .ll {width:3px; w\idth:1px;}
* html .le, * html .lf {width:5px; w\idth:4px;}
* html .lh {width:3px; w\idth:2px;}
* html .li {width:5px; w\idth:3px;}
* html .lj {width:5px; w¥idth:3px;}
* html .lk, * html .lp {width:4px; w\idth:3px;}
* html .lm {width:4px; w\idth:2px;}
* html .lo, * html .ls {width:5px; w\idth:2px;}
* html .lq {width:2px; w\idth:1px;}
* html .ln {width:5px; w\idth:1px;}
* html .lw {width:5px; w\idth:4px;}

.clr {clear:left; height:1em;}

</style>

css font 記述スクリプト

0
<div class="outer" title="zeero"><div class="lc"></div><div class="ls"></div><div class="li"><div class="lq"></div></div><div class="lo"></div><div class="lb"></div></div>

1
<div class="outer" title="wun"><div class="lg"></div><div class="lh"></div><div class="lh"></div><div class="lh"></div><div class="lj"></div></div>

2
<div class="outer" title="too"><div class="lb"></div><div class="lf"></div><div class="lj"></div><div class="le"></div><div class="la"></div></div>

3
<div class="outer" title="tree"><div class="lb"></div><div class="lf"></div><div class="lb"></div><div class="lf"></div><div class="lb"></div></div>

4
<div class="outer" title="fower"><div class="ld"></div><div class="ld"></div><div class="la"></div><div class="lh"></div><div class="lh"></div></div>

5
<div class="outer" title="fife"><div class="la"></div><div class="le"></div><div class="lb"></div><div class="lf"></div><div class="lb"></div></div>

6
<div class="outer" title="siks"><div class="lj"></div><div class="le"></div><div class="lb"></div><div class="li"></div><div class="lj"></div></div>

7
<div class="outer" title="seven"><div class="la"></div><div class="lk"></div><div class="lh"></div><div class="lh"></div><div class="lh"></div></div>

8
<div class="outer" title="ait"><div class="lj"></div><div class="li"></div><div class="lj"></div><div class="li"></div><div class="lj"></div></div>

9
<div class="outer" title="niner"><div class="lj"></div><div class="li"></div><div class="lc"></div><div class="lf"></div><div class="lj"></div></div>

A
<div class="outer" title="alpha"><div class="lj"></div><div class="li"></div><div class="la"></div><div class="li"></div><div class="li"></div></div>

B
<div class="outer" title="beta"><div class="lb"></div><div class="li"></div><div class="lb"></div><div class="li"></div><div class="lb"></div></div>

C
<div class="outer" title="charlie"><div class="lj"></div><div class="li"></div><div class="le"></div><div class="li"></div><div class="lj"></div></div>

D
<div class="outer" title="delta"><div class="lb"></div><div class="li"></div><div class="li"></div><div class="li"></div><div class="lb"></div></div>

E
<div class="outer" title="echo"><div class="la"></div><div class="le"></div><div class="lb"></div><div class="le"></div><div class="la"></div></div>

F
<div class="outer" title="foxtrot"><div class="la"></div><div class="le"></div><div class="lb"></div><div class="le"></div><div class="le"></div></div>

G
<div class="outer" title="golf"><div class="lc"></div><div class="le"></div><div class="li"></div><div class="li"></div><div class="lc"></div></div>

H
<div class="outer" title="hotel"><div class="li"></div><div class="li"></div><div class="la"></div><div class="li"></div><div class="li"></div></div>

I
<div class="outer" title="india"><div class="lj"></div><div class="lh"></div><div class="lh"></div><div class="lh"></div><div class="lj"></div></div>

J
<div class="outer" title="juliet"><div class="lj"></div><div class="lh"></div><div class="lh"></div><div class="lh"></div><div class="ll"></div></div>

K
<div class="outer" title="kilo"><div class="li"></div><div class="lm"></div><div class="lr"></div><div class="lm"></div><div class="li"></div></div>

L
<div class="outer" title="lema"><div class="le"></div><div class="le"></div><div class="le"></div><div class="le"></div><div class="la"></div></div>

M
<div class="outer" title="mike"><div class="li"></div><div class="ln"></div><div class="li"><div class="lq"></div></div><div class="li"></div><div class="li"></div></div>

N
<div class="outer" title="november"><div class="li"></div><div class="lo"></div><div class="li"><div class="lq"></div></div><div class="ls"></div><div class="li"></div></div>

O
<div class="outer" title="oscar"><div class="lj"></div><div class="li"></div><div class="li"></div><div class="li"></div><div class="lj"></div></div>

P
<div class="outer" title="papa"><div class="lb"></div><div class="li"></div><div class="lb"></div><div class="le"></div><div class="le"></div></div>

Q
<div class="outer" title="quebec"><div class="lj"></div><div class="li"></div><div class="li"><div class="lq"></div></div><div class="lm"></div><div class="lc"></div></div>

R
<div class="outer" title="romeo"><div class="lb"></div><div class="li"></div><div class="lb"></div><div class="li"></div><div class="li"></div></div>

S
<div class="outer" title="sierra"><div class="lc"></div><div class="le"></div><div class="lj"></div><div class="lf"></div><div class="lb"></div></div>

T
<div class="outer" title="tango"><div class="la"></div><div class="lh"></div><div class="lh"></div><div class="lh"></div><div class="lh"></div></div>

U
<div class="outer" title="uniform"><div class="li"></div><div class="li"></div><div class="li"></div><div class="li"></div><div class="lj"></div></div>

V
<div class="outer" title="victor"><div class="li"></div><div class="li"></div><div class="li"></div><div class="lj"></div><div class="lh"></div></div>

W
<div class="outer" title="whiskey"><div class="li"></div><div class="li"></div><div class="li"><div class="lq"></div></div><div class="ln"></div><div class="li"></div></div>

X
<div class="outer" title="xray"><div class="li"></div><div class="li"></div><div class="lj"></div><div class="li"></div><div class="li"></div></div>

Y
<div class="outer" title="yankee"><div class="li"></div><div class="li"></div><div class="lj"></div><div class="lh"></div><div class="lh"></div></div>

Z
<div class="outer" title="zulu"><div class="la"></div><div class="lp"></div><div class="lh"></div><div class="lq"></div><div class="la"></div></div>

@
<div class="outer" title="at"><div class="lj"></div><div class="li"></div><div class="ls"><div class="lq"></div></div><div class="li"><div class="lq"></div></div><div class="lj"></div></div>

. 【dot】
<div class="outer" title="dot"><div class="lz"></div><div class="lz"></div><div class="lz"></div><div class="lg"></div><div class="lg"></div></div>

- 【hyphen】
<div class="outer" title="hyphen"><div class="lz"></div><div class="lz"></div><div class="la"></div><div class="lz"></div><div class="lz"></div></div>

/ 【shash】
<div class="outer" title="slash"><div class="lw"></div><div class="lp"></div><div class="lh"></div><div class="lq"></div><div class="le"></div></div>

: 【colon】
<div class="outer" title="colon"><div class="lg"></div><div class="lg"></div><div class="lz"></div><div class="lg"></div><div class="lg"></div></div>

_ 【underline】
<div class="outer" title="underline"><div class="lv"></div><div class="lv"></div><div class="lv"></div><div class="lv"></div><div class="la"></div></div>

日時: 2007年06月25日 20:47 |

トラックバック

このエントリーのトラックバックURL:
http://point-line.info/cgi/mt/mt-tb.cgi/294

コメントを投稿

検索


About

2007年06月25日 20:47に投稿されたエントリーのページです。

ひとつ前：「フォントあれこれ」

次のは：「“ノ・メ・モ・ハ”… の文字化け」

メインページ
アーカイブページ

このブログのフィードを取得
[フィードとは]
Powered by
Movable Type 3.34