Google Fonts + Japanese • Google Fonts + 日本語
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法 - Qiita
ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法fontwebfont 2018年6月29日現在、ウェブフォントの「Noto Sans JP」で字詰めできなくなっていることを確認しました。 Googleが仕様を変更したのかもしれません。 "Noto Sans JP"のウェブフォントを利用すれば、すべての機器で文字表現を統一できます。 しかし、日本語のウェブフォントは容量が大きいです。 すでにローカルに"Noto Sans CJK JP"がインストールされているなら、ウェブフォントを読み込まずにそちらを利用したい。 そんな要望をかなえる方法です。 結論 "Noto Sans JP"のCSSにlocal("Noto Sans CJK JP <太さ>")を追加するだけです。 元となるCSS 改変したCSS 表示確認用の
游ゴシックは何故Windowsでかすれて見えるのか - Ryusei’s Notes (a.k.a. M59のブログ)
この記事は2016年当時の状況を書いています。その後のバージョンアップで、Windowsでのフォントレンダリングは改善され、ガンマ補正周りのエラーはなくなっているようです。当時の状況を資料として残しておきますが、記事を参照する場合はご注意ください。 TL;DR 游ゴシック体は単に細いから薄いのではなく、ガンマ補正が2重、3重に掛かっているために、グレーが本来よりも明るくなりすぎている。ガンマ補正を逆に掛けると、正常な表示になる。 かすれた游ゴシック Windowsでは游ゴシックがかすれて見える。細字だと薄くて読みづらいから、より太いウェイトを指定しろという話もある。（Windowsで游ゴシックが汚いのは、結局誰が悪いのか？ | Cherry Pie Webなど）だが、かすれて見える原因は、ウェイトが細すぎるからではない。 例えば、本文に游ゴシックを使っているWIREDの記事（「癌」という名
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Chromeでも読みやすい游ゴシックを指定する方法 - Qiita
Windows8.1から搭載された「游ゴシック」ですが、ChromeとOperaで薄く掠れて見難くなってしまいます。 一般的にはbodyにfont-weight: 500;を与えて回避している方が多いですが、フレームワークなどを使用した場合、font-weight100～400を指定しているコンポーネントの数だけfont-weight: 500;と指定しなければならなく、あまり現実的ではありません。 「游ゴシックについて」と「ベストなfont-family」がごちゃ混ぜになって記事が見難くなってしまいました。より詳細に書き込んだため記事を分割しました。 ストックされているかたや、ブックマークされている方にはご迷惑おかけします。 この記事はタイトルの通り游ゴシックのみを扱います。 当記事を踏まえたゴシック体のfont-familyの指定は「2020年まで使えるはずだったfont-family
[最新版] Noto Sans JapaneseをWebフォントとして使う方法
Notoフォントは全ての言語に対応することを目指す野心的なフォント。GoogleとAdobeが共同開発したこのフォントは無料で利用できる。 ※Adobeからは、『源ノ角ゴシック』として提供されている。 プログラミング用フォント『Source Code Pro』を開発したAdobeが関わっているおかげか、Notoフォント自体非常に美しい。 そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されている。 Google Noto Fonts 今回は、このフォントをWebフォント ―すなわち、外部からダウンロードして使うフォントとして使う方法を紹介する。 実は面倒くさい、WebフォントでNoto Sans Japanese Type SquareやFONTPLUSなど、Webフォント提供サービスは数多く存在する。サイトを見る端末にフォントがインストールされて
![[最新版] Noto Sans JapaneseをWebフォントとして使う方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ef8a0de729a6b521ddc76e88f254c49a93b14e4/height=288;version=1;width=512/http%3A%2F%2Ftoach.sakura.ne.jp%2Fbase%2Fwp-content%2Fuploads%2F2016%2F01%2Fmetro-blur.formatted.jpg)
Google Fontsの日本語フォント「Noto Fonts」の使い方
そしてもちろん我らが日本語も用意されています。日本語のフォントセットは「Noto Sans CJK JP」という名前です。 日本語は優遇されているのか7つも異なるウエイト（太さ）が用意されています。 ちなみに名前にあるCJKとはChina、Japanese、Koreaの3つです。1バイト言語の256文字に収まらない、2バイト言語をまとめてCJKとしているようです。（2バイト文字は65536種類に対応している） 中国語は「Noto Sans CJK SC」、韓国語は「Noto Sans CJK KR」と、それぞれ別のセットで、相互に対応していません。統一感のあるセットになっているとのことですが、それぞれの言語が混在する状況はあまりなさそうです。 2バイト文字は数千もの文字を作成する必要があるため、Adobeだけではなく各書体メーカーの協力しています。それぞれ日本語はイワタ、中国語はChang
【おそロシア！！】 旧ソ連の恐い話『ウイルス・OMOH・チェルノブィリ原発事故・ツルふさの謎』他 - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSS Font Loading Module Level 3を試してみた - console.blog(self);
1年以上前から、ちゃんと調べたいと思っていたけど、やっていなかった。 CSS Font Loading Module Level 3は、2014/06/30時点で最終草案(Last Call Working Draft) になっている。CSS Font Loading Module Level 3はフォントのローディングに関する仕様書。 CSS Font Loading Module Level 3 - W3C Last Call Working Draft, 22 May 2014 最新のEditor's Draftはこっち。 CSS Font Loading Module Level 3 - Editor’s Draft フォントについての仕様書はCSS Font Module Level 3で、2014/06/30時点で勧告候補(Candidate Recommendation)にな
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
Google Font API のウェブフォントを使うと iPhone で日本語が表示されない理由 | ブログ | SINAP - 株式会社シナップ
この記事の最初の公開後、さらに調査を続けていたところ、内容に不正確な部分があることがわかりましたので、訂正いたしました。詳細は本文中の追記・訂正をご覧ください。（2010/06/01） 先日、Google から、画期的なウェブフォントサービスの Google Font API が発表されました。既にたくさんの方々が、様々な実験をしたり記事を書いたりいらっしゃいますが、そんな昨日。 「Google Font API で日本語が表示出来ない」という話を小耳に挟みました。 もとより、Google Font API で提供されるフォントは現時点では欧文フォントのみで、日本語の字形データは含んでいませんが、仮にそうしたフォントが日本語を含む文字列に指定されたとしても、本来そこで期待されるのは「指定フォントで表示できない文字は、表示できる別のフォントで表示する」という挙動であって、真っ白になってしまう
フロップデザインフォント
フロップデザインフォントという商用可の日本語フリーフォント フロップデザインフォントは、どなたでも自由に無料でダウンロードして、商用・非商用問わず使用できる日本語フリーフォントです。このフォントは第二水準の漢字も含まれ、ワープロ、Adobe製グラフィックソフトなどのアプリケーションで自由に加工して使えます。ひらがな、カタカナ、アルファベット、数字をオリジナルで制作し、残りの部分をM+FONTで補いました。またM+FONTで不足している漢字をIPAゴシックで補完しています。 フォントのデザイン特徴について 水平、垂直の線がデザインの基本となっているシンプルなゴシック体の日本語フォントです。暖かみのある手書きを感じさせるひらがな、シャープなイメージのカタカナ、スマートでデザイン性の高いアルファベット（英語）、スタンダードで読みやすい数字とそれぞれ異なる考えに基づいて作られたフォントです。しかし
無料でできる！オリジナルアイコンフォントを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんはじめまして！ アートディレクター兼デザイナーの長岡と申します。 社内では、ひろさんと呼ばれています。 入社したばかりですが、どうやらLIGの最年長記録を更新したようです(^^;) 2児の父親として、プライベートでは、子育てに奮闘中なのですが、最近乗り物に興味を持ちだした息子。 電車や車が大好きなようで、テレビに映る度に指をさして「でぇ～んしゃ～♪」とか「ぶぅ～ぶぅ～♪」と叫んでます。 そんな息子の姿を見て、毎日癒されてます(^-^) さて本題に入りますが、スマホサイト・レスポンシブデザイン・Bootstrapなどで度々目にするアイコンフォント。 モバイルファーストを考えながらの制作ですと、表示速度も意識しなければなりませんね～。 フリーのアイコンフォントは、たくさんあれど、「アイコンが多すぎる！」「もっと少なくしたい！」「オリジナルでアイコンを作ったけれども、これをどうにかアイコ
Retinaでもボケない「シンボルアイコン」を使いこなそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！） ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何？ 読んで字の如し、「図形のフォント」です。タイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fonts
FileFormat.Info · The Digital Rosetta Stone
font-familyで指定できるフォント名一覧
Genericons Neue
Google Noto Fonts_Noto Sans CJK JP（Googleの日本語フォント）
【パナソニック公式通販】家電・電化製品なら安心のPanasonicオンラインショップ