m+webfonts

JAPANESE - ENGLISH

Safari が v3.1 で対応した CSS3 の Web フォント機能を検証するため、mplus-fonts.sourceforge.jp 上に M+ OUTLINE FONTS の TESTFLIGHT 052 を、M+ WEB FONTS として設置してみました。ご自由にお使いください。

このページの全ての文字は Web フォント機能を使用しています。対応したブラウザでは M+ WEB FONTS が表示されますが、通信環境によっては描画に時間がかかる場合もありますのでご了承ください。

設置フォント

http://mplus-fonts.sourceforge.jp/webfonts/ 以下に次のフォントがあります。

プロポーショナルフォント（和文字は全角固定幅、欧文字・数字はプロポーショナル）
mplus-1p-thin.ttf
mplus-1p-light.ttf
mplus-1p-regular.ttf
mplus-1p-medium.ttf
mplus-1p-bold.ttf
mplus-1p-heavy.ttf
mplus-1p-black.ttf
mplus-2p-thin.ttf
mplus-2p-light.ttf
mplus-2p-regular.ttf
mplus-2p-medium.ttf
mplus-2p-bold.ttf
mplus-2p-heavy.ttf
mplus-2p-black.ttf
mplus-1c-thin.ttf
mplus-1c-light.ttf
mplus-1c-regular.ttf
mplus-1c-medium.ttf
mplus-1c-bold.ttf
mplus-1c-heavy.ttf
mplus-1c-black.ttf
mplus-2c-thin.ttf
mplus-2c-light.ttf
mplus-2c-regular.ttf
mplus-2c-medium.ttf
mplus-2c-bold.ttf
mplus-2c-heavy.ttf
mplus-2c-black.ttf
固定幅フォント（和文字は全角固定幅、欧文字・数字は半角固定幅）
mplus-1m-thin.ttf
mplus-1m-light.ttf
mplus-1m-regular.ttf
mplus-1m-medium.ttf
mplus-1m-bold.ttf
mplus-2m-thin.ttf
mplus-2m-light.ttf
mplus-2m-regular.ttf
mplus-2m-medium.ttf
mplus-2m-bold.ttf
mplus-1mn-thin.ttf
mplus-1mn-light.ttf
mplus-1mn-regular.ttf
mplus-1mn-medium.ttf
mplus-1mn-bold.ttf
top

CSS の指定例

@font-face 要素を使ってフォントの定義を行います。 

@font-face
{
font-family: mplus-1p-regular;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf')
     format("truetype");
}

現状では font-weight 指定がうまく機能しないため、上記の例では font-family に直接 M+ 1P の Regular ウエイトを指定してあります。
この定義を html ファイルの head 要素内に記述する場合は下記の SAMPLE STYLE 部分に指定します。 

<head>
<title>SAMPLE TITLE</title>
<style TYPE="text/css">
<!--
SAMPLE STYLE
-->
</style>
</head>

全ての M+ フォントを定義する場合は、mplus-fonts.sourceforge.jp 上の mplus_webfonts.css ファイルを下記のように指定すると便利です。 

<head>
<title>SAMPLE TITLE</title>
<link rel="stylesheet"
 type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css" />
</head>

このようにして定義されたフォントは、font-family プロパティを mplus-1p-regular などと指定することで利用できます。 

<h1 style="font-family: mplus-1p-regular;">SAMPLE TEXT</h1>

html ファイルの head 要素内に記述する場合は SAMPLE STYLE 部分に指定します。 

h1
{
font-family: mplus-1p-regular;
}
top

フォントライセンス

これらのフォントはフリー（自由な）ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

These fonts are free software.
Unlimited permission is granted to use, copy, and distribute them, with or without modification, either commercially or noncommercially.
THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY.

top

リンク

W3C - CSS3 module: Web Fonts
http://www.w3.org/TR/css3-webfonts/

ZDNet Japan - Safari 3.1 で Web フォントを利用する: Safari の CSS 対応
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20370308,00.htm

ZDNet Japan - Safari 3.1 で Web フォントを利用する: 様々な字体を定義する
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20370746,00.htm

M+ FONTS - Project Info
http://sourceforge.jp/projects/mplus-fonts/

M+ OUTLINE FONTS
http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/

top
SourceForge.jp