Memo

メモ > 技術 > 開発: Web > フォント

フォント
デバイスフォント・WEBフォント大解剖 〜新人デザイナーのテキストフォント選び〜 | WebNAUT https://webnaut.jp/design/1180.html 2024年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ 今さら聞けないWebフォントの基礎知識 | 株式会社LIG https://liginc.co.jp/547818 Webサイトで使用される定番フォント9選! フォントの選び方や良いフォントの特徴も解説! | 株式会社PLAN-B https://www.plan-b.co.jp/blog/creative/53344/ 【css】Webフォント、ローカルフォントの指定方法 at softelメモ https://www.softel.co.jp/blogs/tech/archives/3676 Google Fontsの使い方とWebフォントにおすすめの日本語フォント紹介! https://www.unprinted.design/articles/google-fonts/ ウェブサイト制作では、游ゴシックはおすすめしない理由 | クリエイターズ・シナジーカフェ https://community.creators-synergy-cafe.com/blogs/711fed11c7fb ■実例 以下は実際にWebフォントを使用してみたもの。 ふい字P https://refirio.org/memos/font/huifont/ ■ファイル形式について Webフォントには「woff」「woff2」「ttf」といった種類がある。 IEを無視して良ければ「woff2」を、IEを考慮しておくなら「woff」「ttf」を使用すると良さそう。 自社サーバーにフォントをアップロードして、Webフォントを使用する方法|株式会社ゼロワンアース https://01earth.jp/web-create/coding/web-font/ TTF WOFF2 変換 フリー、 ttfをwoff2に変換 オンライン https://miconv.com/ja/ttf-o-woff2/ ■TrueTypeフォントとOpenTypeフォントについて OpenTypeで表示できるなら、そちらを使うと良さそう。 OpenTypeフォントとは? - Home https://mp-support.morisawa.co.jp/hc/ja/articles/28443707966105-OpenType%E3%83%95%E3%82%A9%E3%83%B3%... TrueTypeフォントとOpenTypeフォントの違いを教えて下さい。 | フォント・書体の開発及び販売 | ダイナコムウェア株式会社 https://www.dynacw.co.jp/support/support_faq_detail.aspx?qid=501&fcid=200 TrueTypeとOpenType、どう選べばいい?|デザインポケット[design pocket] https://note.com/design_pocket/n/nf7b637cb501b ■CJKについて 「C(Chinese)、J(Japanese)、K(Korean)の全てが入っているフォントで、その中でJapaneseを優先的に表示するようになっている」らしい。 Geeko Blog > Noto Sans CJK JPと、Noto Sans JPの違い https://blog.geeko.jp/syuta-hashimoto/2446 ■利用できそうなフォント 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス https://coliss.com/articles/freebies/japanese-free-fonts.html 日本語フォントがGoogle Fontsに大量追加!すべてのフォントが商用利用も無料のフリーフォントです | コリス https://coliss.com/articles/freebies/google-fonts-for-japanese.html フォントが大好物な人に朗報 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ!! | コリス https://coliss.com/articles/build-websites/operation/work/googlefonts-morisawa-biz-ud-gothic-and-min... これはかなりいい! Helveticaに似たオープンソースの無料フォント -Overused Grotesk(異世界のHelvetica) | コリス https://coliss.com/articles/freebies/overused-grotesk-helvetica-in-an-alternative-universe.html LINE Seed https://seed.line.me/index_jp.html ■Google Fonts Browse Fonts - Google Fonts https://fonts.google.com/ Google Fonts + Japanese - Google Fonts + 日本語 https://googlefonts.github.io/japanese/ Google Fontsの使い方とWebフォントにおすすめの日本語フォント紹介! https://www.unprinted.design/articles/google-fonts/ 数字で見るGoogleフォントベスト15 2024 年版(使い方のヒント付き) https://kinsta.com/jp/blog/best-google-fonts/ ■Noto Sans CJK 以下のフォントは、中国語・日本語・韓国語に対応しているらしい。 公式によると 「Noto Sans CJK は、繁体字中国語、簡体字中国語、日本語、韓国語を完全にカバーするグリフのバリエーションを備えています。」 とのこと。 GitHub - notofonts/noto-cjk: Noto CJK fonts https://github.com/notofonts/noto-cjk Google Developers Japan: オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。 https://developers-jp.googleblog.com/2014/07/noto.html ■アイコンフォント Font Awesome https://fontawesome.com/ 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう https://saruwakakun.com/html-css/basic/font-awesome Font Awesome アイコンフォント一覧 [Free (フリー) のみ] | JOHOBASE https://johobase.com/font-awesome-icon-font-list-free/ ■コーディング用フォント プログラミング向けフォント「0xProto」の紹介 #開発環境 - Qiita https://qiita.com/usamik26/items/2ab0c4b88bf7c00845dd 日本人プログラマー向けコーディングフォント「Bizin Gothic」が無償公開 - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1596755.html 日本人プログラマー向けカスタムフォント「UDEV Gothic」が約2年半ぶりのメジャー更新 - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1617092.html 日本人プログラマ向け、プログラミングに適した「フォント」まとめ。2024年版 − Publickey https://www.publickey1.jp/blog/24/2024_1.html ■デバイスフォントとデザイン ・デバイスフォント=パソコンで本文とかに使う、ディスプレイでの文字の読みやすさを考えて作られたフォント。派手な見た目のことは考えていない。 ・デザイン重視のサイトで、タイトルなど目立つ箇所にデバイスフォントを使うのは、(まともなデザイナーなら)原則としてあり得ない。 ・タイトルなどでデバイスフォントが使われていたら、フォントが無いために意図したデザインを確認できていない可能性を考える。 ・正解のデザインを知っておく(PNG画像として書き出したものを送ってもらうなど)。

Advertisement