サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!--HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
まとめ使われているフォントは、AXIS、ゴシックMB101、筑紫A丸ゴシック、筑紫明朝などが多く、明朝体よりもゴシック体の方が人気のようでした。無償で利用できてクオリティの高い源ノ角ゴシックも今後増えていきそうです。これらのサイトで使われているサービスはTypeSquare、FONTWORKS、FONTPLUS、Fonts.comなどで、それ以外のサービスはフォントブログの国内のWebフォントサービスまとめ -フォントブログに特徴も分かりやすくまとめられています。 日本語Webフォントは多くの場合定額で費用がかかること、そして読み込み処理の問題があります。ただメリットとしては、構築／更新のしやすさと文字の美しさを両立できるので、できるだけ使っていきたいと思いました。
日本語Webフォントに革命がおきた． 詳しくは続きを読んでくれ． ちょっと大きく出てみた． 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました． サンプルページはこちら 臨時のサンプルページはこちら 追記herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう． 追追記herokuで運用は再検討したほうがよさそう．「こういうこともできます」の事例ということでひとつ． （やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう） そんなわけで，どうぞご利用ください。 （ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．） 何が革命なんだ 革命が起きたというけど，どこが革命なの？ 僕には革命が起きたようには思えないけど そんなこと言わんといて，泣くわ．
TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、AdobeBlankを使って自前で書いてみることにした。 AdobeBlankのサイズ削減 AdobeBlankはそのまま使うと30KB以上ある。読み込み完了検知だけなら幅0のグリフが1つあればそれで良いので、まずはサブセット化してサイズを抑えることから。aだけのWOFFなAdobeBlankを作ればちょうど1KBくらいになる。 Download: adobe-blank.woff @font-face定義の追加 外部リクエストにすると意味が薄れるのでDa
fonts.comのWebfontプランに課金したところ便利だった。 DINもUniversもAXISも使える fonts.comはフォントを売ってるサイトだけど、Webフォントの配信サービスもやってる。月10ドルのスタンダードプランに加入すると、fonts.comで取り扱ってる20,000種類以上のフォントがWebフォントとして使い放題になる。 特筆すべきは、欧文フォントのラインナップの多さで、有名書体は一通り揃っていると思う。僕は今までWebフォントはGoogle FontsやAdobeのTypekitをよく使っていたのだけど、ラインナップに少し物足りなさを感じていて、惰性でTypekitのProxima Novaを選ぶ生活を送っていた。それらと比較すると、抜群にラインナップがよい。ちゃんと定番書体を使える、という安心感がある。 また、それほど数は多くないものの、日本語フォントが使える
As of March 28, 2024, all fonts previously sold on Fonts.com are now available for purchase at MyFonts.com and through Monotype’s subscription service, Monotype Fonts, where applicable. Your customer history will be preserved on MyFonts or through a subscription on Monotype Fonts*. Whichever route you choose, both platforms offer flexible licensing options and convenient ways to access and use the
WMCache.js を使って、Notoフォントをキャッシュし、レンダリングするテストコードです。 Notoフォントのサイズは16.4MBありますが、キャッシュされているため一瞬(この例では57ms)です。 これで、2015年からはゲームの世界感に沿った WebFont とか使えるんじゃないでしょうか。 function _multiline(fn) { // @arg Function: // @ret String: return (fn + "").split("\n").slice(1, -1).join("\n"); } function addText() { document.body.innerHTML += _multiline(function() {/* <p class="message"> こんにちは日本におけるWebFontの世界。<br /> 私は今、WMC
※この記事は2014年1月6日に執筆された記事です。現在は内容が異なる可能性があります。 あけましておめでとうございます！定番フォントを愛してやまない、デザイナーのタカハマです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね！ そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォントをカタチ別にピックアップ 今回は定番フォントの偏りを防ぐために、誠文堂新光社「ABCのみほん〜かたちで見分けるフォントガイド〜」を参考に次のようなカテゴリで分類させて頂きました。 Historical Script歴史的書体 Serif セリフ書体 Hybrid ハイブリッド書体 Sans Se
現在、欧文を中心に600以上の書体が選べるGoogleWebフォント。これだけ数が多いと、どれを選べばいいのか日本人の私たちにはよく分かりません。 今回は、全世界で最も使われている人気のGoogleWebフォントを10個厳選してお届けします。海外向けのサイトを作る際にはハズせない、日本向けサイトを作る際にもアクセントとして使いたい、とっておきのGoogleWebフォントを集めました。GoogleWebフォントを使うメリットGoogleWebフォントを使うと、こんなにもたくさんのメリットがあります。SEO対策になる 修正が簡単に行える 選択してコピペできる 拡大縮小・高解像度画面（Retina Displayなど）でもボケない 使わない手はありません。GoogleWebフォントの使い方 使い方に関しては、OZPAさんのブログが詳しいです。参考にしましょう。 今さらながらWe
canvas要素にwebフォントを確実に描画する方法webページをデザインする上で，必要に応じてフォントをダウンロードすることが出来るwebフォント機構は非常に魅力的で利便性の高い仕組みですが，使い方によっては色々と面倒な作業が必要なようです．今回解説するcanvas要素との連携はこの最たるもので，場合によっては正しい処理結果が得られません． ※2017現在ではより良いAPI（FontFaceSet/FontFace）がありますので, そちらを使ったほうが良いでしょう. http://defghi1977.html.xdomain.jp/tech/canvasMemo/canvasMemo.htm にて解説しています. (FontFaceSet/FontFaceで検索して下さい) webフォントとは 今日のwebブラウザの大部分ではcssにおける@font-face規則を記述することで，webサーバー上のフォントファイルを必要に応じてダウン
フォントブログ 閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへアーカイ
サーバに上げた、好きなフォントで表示が出来るWebFonts(ウェブフォント）。 設定の仕方は下記の記事に書きました。（気力があればそのうち転記予定） Web Fonts(ウェブフォント)で遊ぶ(1) Web Fonts（ウェブフォント)で遊ぶ(2) しかし、今回新しくブログを作って試したところ問題発生。 なぜかFireFoxだけフォントが表示されない。 （ＩＥ，ChromeはＯＫ） FireFoxは仕様や定義に合わない記述は見逃してくれないお堅いブラウザであることは有名。 またどこぞでいい加減なタグとか、スペルミスとかしてるんだろうかと思ったんですが、CSSを調べても、HTMLを調べても怪しいところは見つからず・・・。うーん、困った。 どっちかっていうとCSSは読み込まれてて、フォントの取得に失敗してる感じなんだけどフォントのリンクに間違いはないし。 と、思ったら、原因発見。 ソー
blog移行しました。新しいblogで更新を続けています。 XMLェ…text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまはOGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまはHTML にSVG 混在でき
Webフォントは「Web サイトにフォントを埋め込む」ための技術です。 先日、Webフォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Webフォントが適用されなかった方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。 ほぼすべてのブラウザーが Webフォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して「Webフォントに対応していない環境」がどの程度あったのかを調べてみました。 ４種類のフォーマット 一口に Webフォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
html5Webフォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Webフォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Webフォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Webフォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Webフォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Webフォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
HTML5最近、Webフォントをつかってかっこいい表現をしているサイトも増えてきました。ただ、残念ながら 日本語で Webフォントを使うのは厳しいのが現実です。というのも、日本語には英数字・ひらがな・カタカナ・漢字・記号・・・など必要になる文字数が多すぎるため、フルスペックの日本語の Webフォントはファイルサイズがすごいことになりそうです。そこで、「利用したい文字だけを含んだ Webフォントをその都度作ればいいんじゃね？」ということを考えてみました。アイデア自体は珍しいものではなく、例えば デコもじ というサービスは同じようなことをやってくれるようです（ただし、無料では「書体 1 つまで」「5 文字まで」など機能制限が大きい）。手始めに日本語 Webフォントを作ってみるまずは簡単に日本語 Webフォントを作る方法を紹介しておきます。無料で公開されているフォントの中にも、フォン
本エントリは、「Android Advent Calendar*1」という企画の１エントリにもなっています。他にも色々楽しいエントリが上がる予定なのでこちらの方もチェックしてみてください☆Google Web FontsAPIってなに？Google Web Fontsとは、Googleが提供するWeb Fontのホスティングサービスです。本日時点で、欧文フォントで302字体あります。ざっとこんな感じ。こんな種類の多いのでAndroidでも使ってみたくなってきますよね。Androidで使ってみる。Google Web Fonts はAndroid 2.2 以上対応となっています。通信が発生するのでパーミッションも必要です。AndroidManifest.xmlに追加します。 <uses-sdkandroid:minSdkVersion="8" /> <uses-permissi
Google Web Fontsで提供されているWebフォントの中にはレギュラー書式の無いものが幾つかあります。具体的にはAllanがそうです(他にもあります)。これらを利用する場合、必ずURLパラメータに書式の情報も付け加えなければなりません。WebのUIでコツコツ選んで利用する場合は既に加えられているので問題にならないのですが、API経由でURLを組み立てる場合は少し注意が必要になります。API経由でWebフォントの一覧を取るとその中でAllanは以下のような形で返ってきます。 { "kind": "webfonts#webfont", "family": "Allan", "variants": [ "bold" ], "subsets": [ "latin" ] }, variantsを見ればわかるようにregularが含まれていません。このことを無視して以下のようなURLでリク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
