2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
Google Fontsの日本語フォントの高速化施策が面白かった
本記事は【ウェブフォント Advent Calendar 2018】2日目参加記事です。 Web大好き人間、そして、フォント大好き人間の端くれとして参加させていただきました。よろしくお願いします。 Google Fontsで日本語フォントが正式リリース！ さて、今年のWebフォント界の大きなニュースといえば、やはりGoogle Fontsで日本語フォントが正式リリースされたことではないでしょうか。 これまでGoogle Fontsの日本語フォントはEarly Access（ベータ版）として2年くらい前からひっそりと配信されていましたが、ついに正式リリース！ これにより、日本語圏のWebフォントの導入や提案のハードルがグッと下がったように思います。 前置き：日本語フォントはファイルサイズが大きい、という話 Webフォントは その名の通りWebページで使えるフォントのことです。 しかし、日本語
Microsoft、ターミナル・コードエディター向けの新フォント「Cascadia Code」を発表（Impress Watch） - Yahoo!ニュース
米Microsoftは9月19日（現地時間）、コマンドラインやコードエディター向けに開発された新しいフォント「Cascadia Code」を発表した。5月に開催された開発者向けカンファレンス“Build 2019”でお披露目されたフォントで、今回が初めてのリリースとなる。 「Cascadia Code」は、ターミナルアプリケーションや「Visual Studio」「Visual Studio Code」といったテキストエディターでの利用を想定して開発された等幅フォント。“Cascadia（カスカディア）”は元々「Windows Terminal」プロジェクトのコードネーム。プロジェクトの正式名には採用されなかったが、今回フォントの名前として引き継がれた。 本フォントのアドバンテージは、コーディング時の視認性に優れる点だけではない。合字（リガチャ）をうまく活用しており、たとえば“＜”と“=”
RictyとRicty Diminishedのプログラミング用フォントをMacにお手軽にインストールする - このすみろぐ
普段から何気なく使っている、プログラミング用のフォントがあります。「Ricty」と「Ricty Diminished」です。 http://www.rs.tus.ac.jp/yyusa/ricty.html http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html 私の周りでも、フォントにこだわっている人の話はあまり聞いた事がなくて、もしかしたらプログラマやSEの方でも、意外と知らない方が多いのかもしれません。 ・・・でも、とても良いフォントなので、紹介します。 Ricty Diminished はLinux向けのフォントである Ricty Diminished (リクティ・ディミニッシュト) は Ricty の姉妹フォントであり、 Linux 環境での研究・開発を想定したプログラミング用フォントです。 テキストエディタやターミナルエミュレータ
Herokuでフォントを追加する – r7kamura – Medium
Heroku で動かしている環境にフォントを追加する方法について。日本語を含む PDF を生成する場合などに必要になる情報です。 Heroku の環境では、fontconfig という、システム全体のフォントの設定を管理するためのライブラリが利用されています。この設定により、システムがフォントを参照するディレクトリの1つとして、~/.fonts が設定されています (※fontconfig 的にはこのディレクトリは非推奨とありますが)。 この ~/.fonts ディレクトリ以下にフォントファイルを配置することで、システムがフォントを参照できるようになります。フォントファイルというのは、例えば TrueType 形式のフォントの場合、*.ttf のような拡張子のファイルのことです。例えば前述した日本語の PDF 用途だと、IPA フォントや Noto フォントが利用されているケースをよく見か
プログラミング用フォント Ricty Diminished
Ricty Diminished (リクティ・ディミニッシュト) は Ricty の姉妹フォントであり、 Linux 環境での研究・開発を想定したプログラミング用フォントです。テキストエディタやターミナルエミュレータ、プログラミング言語やマークアップ言語に対する使用に適しています。Inconsolata と Circle M+ 1m の合成、および、プログラミング用フォントとしてのいくつかのチューニングを行ったフリーな TrueType フォントを配布しています。JIS 第二水準の漢字が不足しているため Ricty Diminished と命名しました。 また、JIS 第四水準の漢字をサポートする姉妹フォント Ricty は生成スクリプトを配布しています。 ハイライト ラテン文字には Inconsolata が適用されます。 それ以外の文字には Circle M+ 1m が適用されます。M
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
GitHubで使用されているアイコンフォント「Octicons」が一般公開を開始
世界中のソフトウェア開発者のための共有ウェブサービスであるGitHubは、同サイトで使用されているアイコンフォント「Octicons」を一般向けに公開を開始しました。 Octicons http://octicons.github.com/ 公開されたアイコンフォントの一覧がこちら。GitHubが使っているアイコンだけあって、開発系のWebサイトやソフトに特化したアイコンが揃っているといえます。 サイトで各アイコンをクリックすると、各アイコンの文字コード(Unicode)やサイト埋め込み用のタグが表示されます。 フォントをPCにインストールするには「Download Octicons」をクリックし、圧縮ファイル(zipファイル)をダウンロード。 ファイルを解凍し、「octicons-local.ttf」をインストールすると、ローカルでもフォントを使用することができるようになります。 各アイ
Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are usi
![Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3413d27979db9730c62af2cea80b93bff45d129/height=288;version=1;width=512/https%3A%2F%2Fcss-tricks.com%2Fwp-json%2Fsocial-image-generator%2Fv1%2Fimage%2F168417)
安全でアクセシブルなアイコン・フォント
Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？ どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。 効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に
絵文字フォント - EmojiSymbols Font
インターネット上での利用に特化したwebフォントです。 Webページ・Webサービスの利用であれば、個人・商用問わず無料でご利用いただけます。 フォントをご自身のWebサーバへアップロードしてご利用いただけます。 Unicode6.0で制定された携帯絵文字に対応した826の絵文字を収録しています。（2012年10月現在） Webフォントはwoff形式を用意しました。 パソコン・タブレット・モバイルなど、幅広い範囲でご利用いただけます。 絵文字はテキストとして表現されているため、簡単に内容を修正・装飾することができます。 Web以外の利用（商業印刷物・雑誌収録・電子出版・映像・ソフトウェア/ハードウェア組込）は有料オプションにて対応。 Download Font
文字を制限した軽量な日本語 Web フォントを作成する方法 - てっく煮ブログ
HTML5最近、Web フォントをつかってかっこいい表現をしているサイトも増えてきました。ただ、残念ながら 日本語で Web フォントを使うのは厳しいのが現実です。というのも、日本語には英数字・ひらがな・カタカナ・漢字・記号・・・など必要になる文字数が多すぎるため、フルスペックの日本語の Web フォントはファイルサイズがすごいことになりそうです。そこで、「利用したい文字だけを含んだ Web フォントをその都度作ればいいんじゃね？」ということを考えてみました。アイデア自体は珍しいものではなく、例えば デコもじ というサービスは同じようなことをやってくれるようです（ただし、無料では「書体 1 つまで」「5 文字まで」など機能制限が大きい）。手始めに日本語 Web フォントを作ってみるまずは簡単に日本語 Web フォントを作る方法を紹介しておきます。無料で公開されているフォントの中にも、フォン
Cocoa Emacs のフォント設定について - 瀬戸日記
随時更新（最終更新：2012年3月28日） 書き散らかしている状態なので、ややこしく見えるかもしれないけどそんな事無いです。最終的には MacEmacs Wikiにできるだけ簡潔にかきます。 概要 フォント設定のスタンダードな方法は、初期フレームとそれ以降のフレームのフレームパラメータのデフォルト値を指定する連想リスト default-frame-alist でフォントを指定すること。日本語を使う場合は、複数のフォントを使い分けるためフォントセットを指定する。設定例(1)はその方針。もう1つ別の方法があり、フレームのフォントを set-face-attribute という関数を使って変更する。これもフォントセットが自動的に作られて、それを後で調整する。それが設定例(2)。いずれの方法でも、最終的にはフレームのフェイスに対して1つのフォントセットが選ばれた状態になる。 現在の Emacs 2
Cocoa Emacsでのフォント設定 - あどけない話
Cocoa Emacs をそのまま使うと、等幅フォントの設定が使い物になりません。日本語文字の幅は、英語文字の倍であるべきです！ Web を調べても、みんな困っていることが分かっただけ。そこで自分でハックしてみましたが、到底手に負えないことが分かりました。(フォントは Emacs の最も難しい部分です！) という訳で、Cocoa Emacs の Adrian Robert さんにメールしたところ、「フォント周りは半田さん」とのこと。結局、半田さんに質問しました。 そしてついに、Carbon な Emacs 22 でも Cocoa な Emacs 23 でも、希望通りにフォントを設定することができました。 以下がそうです。僕は、ヒラギノ丸ゴを使っています。 (setq my-font "-*-*-medium-r-normal--14-*-*-*-*-*-fontset-hiramaru")
【コラム】OS X ハッキング! (332) Cocoa対応で大きく変わった「Emacs 23.1」(2) | パソコン | マイコミジャーナル
iPhoneアプリ、買ってますか? つい"ポチッとな"してしまう仕掛けの数々に、Appleの計算高さが見え隠れしてしまうのですが。それはさておき、不定期に発生する「期間限定セール品」、そのお知らせを効率よく知る方法はないものでしょうか? 先日、コナミの「フロッガー」を67%OFFで購入したのですが、私はたまたま情報を入手できたからいいものの、セール情報自体知らない人も多いはず。売り手 / 買い手ともに、もったいない話だと思うんですよねえ。 さて、今回も『第331回 Cocoa対応で大きく変わった「Emacs 23.1」(1)』に続き「Emacs 23.1」(Cocoa Emacs) について。筆者の「~/.emacs.el」から、Cocoa Emacsに必要 / あれば便利な設定を抜粋する形でお届けしたい。 海上忍氏が利用中の「.emacs.el」(抜粋)はこちらからダウンロードできます(
Google Font API - Google Code
How do I start? Read the Getting Started guide. Choose fonts from the Font Directory. Optionally, use the WebFont Loader library for more control over font loading. What are the Google Font API and the Google Font Directory? The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API. The Google Font API helps you add web fonts to any web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - edihbrandon/RictyDiminished: Ricty Diminished --- fonts for programming
anopara
たぬきフォント
IDEA * IDEA
