インターネット上ではさまざまなフォントが配布されていますが、何となく使用したいフォントのイメージはあるものの正式名称がわからなかったり、フワッとしたイメージしかなくてどうやって検索すればいいかわからなかったりといったケースはよくあるもの。そんなフォント選びに困った場合に役立つ、書体やイメージワードから300個の日本語フリーフォントを絞り込み検索できるサイトが「モジザイ」です。 モジザイ https://www.mojizai.com/ モジザイを開くとこんな感じ。 モジザイでは「書体から検索」と「イメージワードから検索」があり、それぞれ表示されているタグを選択することでフォントの検索ができます。試しに「明朝体」をクリック。 スクロールすると、明朝体のフォントが絞り込まれて表示されました。記事作成時点では、モジザイでは362種類のフォントへのリンクが含まれており、そのうち明朝体は31件ヒット
折れ線グラフを描画するためのフォント「Linefont」、波形・スペクトル・ダイアグラム・ヒストグラムなどの棒データを描画するためのフォント「Wavefont」が、Google Fontsで利用できるようになったので紹介します。 Linefont | Wavefont フォントのライセンスはSIL Open Font Licenseで、個人でも商用プロジェクトでも無料で利用できます。 まずは、Linefont。 Linefontは中小規模の折れ線グラフ(時系列など)を描画するためのフォントです。値は0~100の範囲でさまざまな文字に割り当てられます。範囲、値、ウェイトはWavefontと互換性があり、視覚的な一貫性を維持しながらフォントを交換できます。
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
あおぼし -GitHub Aoboshi One -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 Copperplate Gothicのような文字の太さが均一でセリフのある和文書体を目指してつくられたかなフォント。ひらがな・カタカナ・英数記号文字・ラテン文字が収録されています。 フリーフォントのダウンロードはページ上部の「Download Family」から、またはGitHubの「Code- Download Zip」から。 つきみ丸ゴかな -GitHub Tsukimi Rounded -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 東京築地活版製造所の3号かなの骨格にインスパイアされたかなフォント。筆の動きを残した丸ゴシックで、縦組みにぴったりです。ひらがな・カタカナ・一部の記号文字が収録されています。 フ
2022年も残り2週間ちょいですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです! これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 2022年フォント界の大きなニュースは、今年も引き続きGoogle Fontsに大量の日本語フォントが追加されたことでしょうか。Webフォントとして利用できるのはもちろん、オープンソースなので商用プロジェクトでも無料で利用できます。 また、LINEからフリーフォントがリリースされたのも予想外でした。ほかにも、手書き系の文字種が揃ったフリーフォント、マンガやテレビにインスパイアされたフリーフォントなど、使いたく
画像であれば、例えば「640px×480px」で作成されていれば、CSSで「width:100%;」を設定すると自動的に縦横の比率を保ってレスポンシブル対応してくれます。 ですが「div」などで枠を定義し、その枠の比率を保ったままレスポンシブル対応するにはコツが必要です。 デモ デモページ サンプルコード スタイルシート .nav-box { max-width:200px; height:auto; background:rgba(250 149 157); padding-top: 30%; /* padding-top(%) = 高さ / 横幅 * 100 */ position:relative; } .nav-box p { color: white; position:absolute; top:50%; left:50%; transform: translate(-50%,
Generated CSS: What are fluid-responsive fonts / fluid typography? Also known as: Responsive typography (excellent article), Flexible Type, Fluid Type, Viewport Sized Typography, Fluid Typography, and even Responsive Display Text. They all leverage the viewport width, and / or height, to smoothly scale the font-size rather than switch at specific breakpoints. Some versions address the whole page,
フリーフォントが大好物な人に朗報です! 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです! 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語
7月に配信が開始された『ファイナルファンタジー ピクセルリマスター』(以下、『FF ピクセルリマスター』)シリーズについて、フォントを原作に近いドット風に変更するMod「FFSilver」が海外で制作された。日本語を含む10ヵ国以上の言語に対応している。 An Earthbound-inspired Final Fantasy Pixel Remaster replacement pixel font, similar to what @ClydeMandelin used for Mother 3. I gave it some extra-special TLC to make sure the glyphs and numbers were aligned. PLEASE RT! https://t.co/xk5ERrxTOH pic.twitter.com/TlCfPbmGiM —
やばいな〜。IBMがこの度公開した和文のゴシック体フォント「IBM Plex Sans JP」、完全にオープンソースなんだけど、独特のスミ取り処理とかでツブレにくく、これまでになかった表情があってオシャレ。 完成度高くておすすめで… https://t.co/oRhFNB9kjk
ピクセルフォントが大好物な人に朗報です! ピクセルフォントを多数リリースしているx0y0pxFreeFontから新作フォント「マルモニカ」がリリースされました。 可読性に優れたピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されています。さらに、ライセンスも太っ腹で、商用無料、ゲームやスマホアプリへの埋め込みもOKです。 マルモニカ マルモニカの特徴 マルモニカのダウンロード x0y0pxFreeFontの他のフォント マルモニカの特徴 マルモニカは、ピクセルフォントを多数リリースしているx0y0pxFreeFontの新作フォントです。 ピクセルが形作る曲線美を追求した丸ゴシック体のピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されていま
Noto Sansは、全言語対応を目指してGoogle とAdobe が共同開発したオープンソースのフォントで、Webフォントとして無料で提供されています。全言語対応を目指しているだけあって、当然日本語(和文)フォントも利用可能です。 今回はそんなNoto Sansフォントを、ブログやWEBサイトで手軽に利用する方法を紹介させていただきます。 Noto Sans JP (japanese) フォントのインポート まずはご利用のCSSファイルに以下のインポート文を追加して、Noto Sansフォントを使えるようにします。 @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); CSSファイルではなく、HTMLファイルの<head>内にlinkタグで指定する場合は↓こちらです。 <head> <link href
◉しっぽり明朝は商用・同人誌利用可能の明朝体フリーフォントです しっぽり明朝は、石井中明朝体OKLやリュウミンKO、A1明朝、筑紫Aオールド明朝等に影響を与えた、東京築地活版製造所の名作書体である五号系活字を下敷きに、物静かで上品で、見ているだけでうっとりするような明朝体を目指して制作した、オールドスタイル明朝体フリーフォントです。 どんな方でも制限なく自由に使えるハイクオリティな本文用明朝体をお届けしたいと考え、こしらえました。フォントを単体で販売したりライセンスを変更する以外は商用でも個人利用でもおおよそ自由に使えるSILオープンフォントライセンスのフォントです。 ◉本文用Regularウエイトを含め全5ウエイトの“新しっぽり明朝” ヴァージョン3は“新しっぽり明朝”と謳ってもいいかもしれません。 それまで開発で使用していたフォント制作ソフトをFontforgeからGlyphsに変更し
Webフォントの設定 @font-faceでフォントを指定する時、font-familyを同じ名前にして、font-weightとfont-normalを使用するフォントに合わせる。 /*medium*/ @font-face { font-family: 'myfont'; src: url('fonts/myfont-medium.woff') format('woff'), url('fonts/myfont-medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } /*light*/ @font-face { font-family: 'myfont'; src: url('fonts/myfont-light.woff') format('woff'), url('fonts/myfont-l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く