お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ(Chrome/Edge/Firefox/Safari)にて再度ご覧ください。
![Webフォント・サービス FONTPLUS | ためし書き](https://cdn-ak-scissors.b.st-hatena.com/image/square/6043fd094605df8ae673c717b57766d95642b211/height=288;version=1;width=512/https%3A%2F%2Ffontplus.jp%2Ftester%2Fogp.png)
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ(Chrome/Edge/Firefox/Safari)にて再度ご覧ください。
今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。 グーグルが日本語のWebフォントをクラウドで提供開始グーグルが日本語のWebフォントを提供し始めていました。実は、2014年7月からあったらしいのですが、私はつい最近になって知りました。 その名も、「Noto Sans Japanese」。このページの表示も、「Noto Sans Japanese」にしてあります。 Noto Sans Japaneseは、6934文字に削減したサブセット版が提供されており、ウェイト(太さ)が7バリエーション。1ウェイトあたり約4.5Mバイトほどのサイズです。 使い方を簡単に説明すると、CSSで定義ファイルを読み込み、 <style> @import url(http:/
General FAQ Release Notes Feb. 26, 2023 Auto-resize option added in the settingsto allow overriding the default behavior of resizing an icon to fit the box. How do I make an SVG? You can export SVGs from any vector software like Adobe Illustrator, Inkscape or Sketch. File > Save As > SVG I already have an SVG font but I want to add more characters to it. Can I do that with Glyphter? Sure! Just dra
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上:カーニング無し、下:カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上:カーニング無し、下:カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
Tips内容 前回「文字詰め機能」以外にもFONTPLUSのWebフォントではプロポーショナルメトリクスを利用した詰め組みが可能です。現在このTipsサイトにはプロポーショナルメトリクスを使っています。見出しは「マティスV Pro B」、本文は「ロダンNTLG Pro M」、行の高さ(行間)は1.75(二分四分アキ)です。 プロポーショナルメトリクスとは? 2013年11月の記事、❹文字詰めでも紹介しましたが、OpenTypeフォントはプロポーショナル情報を内蔵する場合があります。次の図はDTP(AdobeIllustrator)ソフトでプロポーショナルメトリクス設定をしている様子です。 プロポーショナルメトリクス情報がないフォント プロポーショナルメトリクス情報がないフォントは項目そのものがグレーアウトしてチェックできません。↓ プロポーショナルメトリクス情報のあるフォント プロポーショ
今日SNSでつぶやいたネタを少し広げて書いておこうと思う。 Webフォントサービス「フォントプラス」を電通レイザーフィッシュが採用 興味深い採用事例。サイト運用コスト軽減のためWebフォントを使う。たしかに大規模なコーポレートサイトの場合効果があるかもしれない。結果が知りたいところ。 と言ったら、MJの例の人が「画像つくる手間なくなるのいいからウチでもつかってるよ。」的なレスくれたりして、なるほどなーと思った。 WebFont。CSS Font Module Level 3でCSSによる仕様がまとめられている。まあ日本ではまだ活用事例が少ない地味なHTML5関連の技術である。 すごく簡単に言うと、どんなフォントでも使えるようになるって機能。Web上にフォントを置いておいて、Webサイトを表示するときにそのフォントを使うことでコンピュータの中にないフォントでもWebサイトで利用できるというこ
StatelyはWeb Font/CSSを使ってUS地図を表示するソフトウェアです。 地図(ここではUS)をWeb上に描こうと思った場合、SVGを使ったり画像を使うのが一般的です。しかし今回は一風変わったやり方、Web Fontを使ったStatelyを紹介します。 デモです。このアメリカの地図がフォントで作られています。 一部を見ると、ハイライト設定されているのが分かります。 フォントビューワーで見た所。州の形ごとに作られているのが分かります。 StatelyはWeb Fontとスタイルシートで指定されているので色を変更するのがとても簡単です。それも州の略である二文字で指定できます。マウスオーバーなどのアクションを付けるのも簡単でしょう。デメリットとしては厳密に計算された場所に配置されているので、フォントの大きさを変更したりすると一気に崩れる可能性があることです。 StatelyはWeb
ブログに関して技術的なことはかっらきしわからない(からっきしなんて言葉はじめて使った) 私ですが、ちょっと Webフォント なるものに挑戦してみました。 ここ最近ずっと、日本語のフォントに中国語風の『Heiti SC』というのを使っていたんですが、ちょくちょく「文字化けですか?」「見辛い」「気持ち悪い」「調子に乗っている」などなど言われていたので、フォントの変更に踏み切ってみました…(,,-_-) ただ、Mac は ともかく、iOS で表示できる日本語フォントってほとんどないんですよね…。たぶん… おそらく、『ヒラギノ角ゴシック』か、前述の『Heiti SC』しかないような気がします。他にもあるのかな…。:゚(;´∩`;)゚:。 『Heiti SC』は漢字が中華風になっちゃいますしね… 実際は『ヒラギノ角ゴシック』のみと言っても過言ではないですよね…。 『Heiti SC』の ひらがな部分
フォントを活用したデザインがテーマの本セミナーには、紙媒体をメインとするグラフィックデザイナーやWebデザイナーが参加した。セミナーではまず、ロフトワークの濱田真一氏が「クラウドフォントで手に入れる新たな表現力」という題目で講演。 Webデザイナー歴8年、現在はディレクターとして活躍する濱田氏が、「クラウドフォントとは何か」といった基本から、実際の顧客企業への提案事例まで説明した。 まず、クラウドフォント(Webフォント)とは、インターネットを介してフォントを配信し、ブラウザのWebページ表示に使う仕組みだ。ユーザーのデバイス(PCやスマートフォン)にフォントが搭載されていなくても、制作者側が指定したフォントを表示できるのが特徴。 一般的に、Webデザインで特殊なフォントを利用する場合は、テキストを画像化するものだが、クラウドフォントを使うと「たとえば、見出しには立体的な文字を使い、リード
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと?」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。4種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く