ページの先頭です

wrapSingleByteTexts.js

はじめに

和欧混植で指定した場合、欧文が和文より一回り小さかったり、数字・記号で別々のフォントを指定したいけどできない…など、
Webフォントを使用していて「もう少し細かい指定ができたら」という思いから、本プラグインを作成しました。

半角英数記号をそれぞれ任意のclass名のspanで囲み、汎用性を持たせるために、CSSで調整できるようにしています。
判別できるのは、半角英文字、半角数字、半角記号の3つです。それぞれ個別に指定できるのでfont-familyやfont-sizeを調整して、
より綺麗にWebフォントを組むことができます。

本来の目的はWeb上で合成フォントを綺麗に見せることですが、使い方次第では、それ以外にも使えるかもしれません。

HTML

まず、jquery本体を読み込んだ後、本プラグインを読み込みます。

<head>
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
			<script type="text/javascript" src="js/wrapSingleByteTexts.js"></script>
	</head>

CSS

ひとまずbodyにフォントに関する記述を行います。font-sizeは、%でもemでもremでもOKです。

body {
				font-size: 15px;
				font-family: "Sorts Mill Goudy", "秀英明朝 L", "游明朝", YuMincho,"Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HG明朝E","ＭＳ Ｐ明朝", Times New Roman, serif;
				line-height: 1.9;
				vertical-align: baseline;
			}

1.まとめて指定

All

半角英数記号すべてをまとめて指定します。
下のDEMOでは、欧文のみフォントサイズを大きくしています。

JQuery

//$('#all .adjustment p')内のhtml中で半角英数記号を<span class="hankakuAll">で囲む
			$(function() {
				wrapSingleByteTexts($('#all .adjustment p'), 'hankakuAll', 'all');
			});

CSS

/*半角英数記号のスタイルを指定*/
			span.hankakuAll {
				font-size: 16px;
			}

Default調整前

国LINE国Word国character国Type国123国456国$17,89円国「合成フォントの見本」0120-111-222国国１日２月３年４個５時６分７秒８人９件０度１丁目２番地３階４号国グーテンベルクが活版印刷術を発明したのは1440年代後半といわれています。それから約20年後の1465年、その新しい技術はアルプスを越え、イタリアに伝わりました。ドイツから来たSweynheimとPannartzという二人がローマの北にあるSubiacoという村の修道院に滞在し、そこでイタリア最初の印刷物をつくったのです。

Adjustment調整後

国LINE国Word国character国Type国123国456国$17,89円国「合成フォントの見本」0120-111-222国国１日２月３年４個５時６分７秒８人９件０度１丁目２番地３階４号国グーテンベルクが活版印刷術を発明したのは1440年代後半といわれています。それから約20年後の1465年、その新しい技術はアルプスを越え、イタリアに伝わりました。ドイツから来たSweynheimとPannartzという二人がローマの北にあるSubiacoという村の修道院に滞在し、そこでイタリア最初の印刷物をつくったのです。

2.個別に指定

Individual

半角英文字・半角数字・半角記号をそれぞれ個別にスタイルを指定します。
下のDEMOでは、半角英文字はフォントサイズを大きくし、半角数字・半角記号は違うフォントを指定しています。

JQuery

//$('#individual .adjustment p')内のhtml中の
			$(function() {
				wrapSingleByteTexts($('#individual .adjustment p'), 'hankakuAlph', 'alph');//アルファベットを<span class="hankakuAlph">で囲む
				wrapSingleByteTexts($('#individual .adjustment p'), 'hankakuNum', 'number');//半角数字を<span class="hankakuNum">で囲む
				wrapSingleByteTexts($('#individual .adjustment p'), 'hankakuSym', 'symbol');//半角記号を<span class="hankakuSym">で囲む
			});

CSS

/*半角英文字のスタイルを指定*/
			span.hankakuAlph {
				font-size: 16px;
			}
			
			/*半角数字のスタイルを指定*/
			span.hankakuNum {
				font-family: "crimson Text";
			}
			
			/*半角記号のスタイルを指定*/
			span.hankakuSym {
				font-family: "crimson Text";
			}

Default調整前

国LINE国Word国character国Type国123国456国$17,89円国「合成フォントの見本」0120-111-222国国１日２月３年４個５時６分７秒８人９件０度１丁目２番地３階４号国グーテンベルクが活版印刷術を発明したのは1440年代後半といわれています。それから約20年後の1465年、その新しい技術はアルプスを越え、イタリアに伝わりました。ドイツから来たSweynheimとPannartzという二人がローマの北にあるSubiacoという村の修道院に滞在し、そこでイタリア最初の印刷物をつくったのです。

Adjustment調整後

国LINE国Word国character国Type国123国456国$17,89円国「合成フォントの見本」0120-111-222国国１日２月３年４個５時６分７秒８人９件０度１丁目２番地３階４号国グーテンベルクが活版印刷術を発明したのは1440年代後半といわれています。それから約20年後の1465年、その新しい技術はアルプスを越え、イタリアに伝わりました。ドイツから来たSweynheimとPannartzという二人がローマの北にあるSubiacoという村の修道院に滞在し、そこでイタリア最初の印刷物をつくったのです。

DOWNLOADはこちら