CSSでテキストの上下余白が調整可能に！text-box-trimの使い方 - ICS MEDIA
2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge 133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。 たとえば、次のCSSでテキスト上下の余白を調整できます。 .selector { text-box: trim-both cap alphabetic; } ※ただし、フォントによります。 本記事では、上記で指定した各プロパティの使用方法と具体的にどのようなデザインの実装に役立つのか、日本語フォントの場合を中心に紹介します。 テキストの上下のスペースとは？ 今回調整ができるようになったテキストの上下のスペースとは何でしょうか？ このスペースはテキストにline-heightプロパティを設定した際
Slackのデフォルトのフォントが変わってしまったのでSlackのフォントを元に戻したい！ - Qiita
デフォルトに戻すときは /slackfontと送信する。 ※ 変わらない場合は、フォントをインストールしてください。 解説 Slackのデスクトップクライアントでは、 /slackfont <font name> でフォントを <font name> に変えることができます。 フォントはシステムにインストールされてると安心なので、元々のフォントを探してきてインストールします。 Slackの元々のフォントは Lato っぽいので、Google Fontから落としてきてインストールしましょう。 フォントをインストールしたら、Slackを再起動し、上記のコマンドを入力することで、おなじみの見た目が戻ってきます。 https://fonts.google.com/specimen/Lato Slackでお馴染みのフォントです。角に若干の丸みがあるのが特徴で、太字にして見出しやクリエイティブに使って
2024年用、日本語のフリーフォント699種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
個人でも商用でも無料利用できる、日本語のフリーフォント767種類を紹介します。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です！ 前年の686からフリーフォントが100種類くらい増えています！ ※サイト閉鎖などでかなりのフォントが減っています。気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。 本記事は定期的に、全フォントを確認して、更新しております。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。 更新情報 2025/5/15: フォントを24種類追加 2024/12/27: フォントを2種類追加 2024/12/25:
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
クロスドメインフォント-CSS font-faceが読み込まれない | HireHop.jp
多くのユーザーが、HireHopで使用するためにHTML5、JavaScript、CSSの機能を利用して素晴らしいドキュメントをいくつか作成しています。これらのドキュメントの場合、ユーザーはサーバーに保存する特別なフォントを必要とする場合がありますが、フォントがHireHopドキュメントで機能しない場合があります。これは、ブラウザーでのクロスオリジンリソースシェアリング（CORS）の制限が原因です。 フォントがドキュメントに読み込まれない ほとんどのWebブラウザーはクロスドメイン要求を許可しません。これは、同じ発信元のセキュリティポリシーが原因です。つまり、別のドメインのウェブフォントを使用すると、エラーが発生し、ブラウザやHireHopドキュメントでフォントが読み込まれないことがあります。 <style type="text/css"> @font-face { font-family
GitHubが制作した次世代開発体験のためのコーディングフォント「monaspace」（窓の杜） - Yahoo!ニュース
「monaspace」は、GitHubがプログラミング用途に開発したモダンな等幅フォント。ライセンスは「OFL-1.1 license」で、現在「github.com」のプロジェクトページから無償でダウンロードできる。 【画像】プロポーショナルフォント（上）と等幅フォント（下）。等幅フォントは「m」が詰まっていたり、「i」が間延びして感じられる 米GitHubは2022年より、次世代の開発エクスペリエンスを模索・実現する「GitHub Next」という取り組みを進めている。この取り組みはいくつものプロジェクトから構成されており、AIを活用したコーディング支援技術「GitHub Copilot」はとりわけ有名だが、今回紹介するコーディングフォント「monaspace」もその成果の一つといえる。 「monaspace」はコーディングフォントのトレンドを抑えながら、これまでにない要素を含んでいる
プログラミング向けフォント「0xProto」の紹介 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「0xProto」フォントとは 「0xProto」フォントは、プログラミング向けのフォントです。文字の読みやすさを重視しています。 最初のリリースは2023年5月で、その後も何度かアップデートされています。この記事は、執筆時点のバージョンである0xProto 1.500をもとに書かれています。 1.000：2023年5月 1.500：2023年12月 2.000：2024年5月、イタリック体が追加、MacではHomebrewでインストール可能に 2.200：2024年9月、ボールド体が追加 プログラミング向けのフォントとは プログラミン
ウェブフォント ローダー | Google Fonts | Google for Developers
Web Font Loader は、Google Fonts API が提供するフォントの読み込みよりも詳細に制御できる JavaScript ライブラリです。ウェブフォント ローダでは、複数のウェブフォント プロバイダを使用することもできます。Google と Typekit が共同開発したものです。 ウェブ フォント ローダーのドキュメントとソースコードは GitHub リポジトリで入手できます。 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。 最終更新日 2024-07-23 UTC。 �� ��
Adobeユーザーはダウンロードしておこう！ Adobe Fontsで使用できる日本語フォントすべてを一覧できるPDF 2023年最新版
11/15に、Adobe Fontsで使用できる日本語フォントが増えました！ 今回のアップデートでは、マンガ制作用にデザインされたアンティーク書体「貂明朝アンチック」をはじめ、砧書体制作所、FONT1000、視覚デザイン研究所、もじワク研究などの日本語フォントが使用できるようになりました。これらのフォントをはじめ、Adobe Fontsで利用できる日本語フォントすべてが一覧できるPDFも無料でダウンロードできます。 Adobe Fonts日本語書体一覧のPDF 2023年11月版 Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。 フォントのライセンス -Adobe Fonts 一番安いプランを教えて、とたまにメールがきます。Adobe Fontsが使用できて一番安いのは、InCopy年間プラ
CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示
CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @font-faceの新しい構文のブラウザサポート @font-faceによる可変フォントの使用方法 tech()によるカラーフォントの使用方法 @supportsでも同等の機能が使用できる @font-faceの新しい構文のブラウザサポート CSSの@font-faceの新しい構文は、Safai 17（次のバージョンアップ）, Fir
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
html { font-size: 62.5%; } は嫌いだ - デフォルトを変更するのは悪手です - Qiita
font-size: 62.5%;というテクニックがありますよね デフォルト値に手をかけるので、超絶嫌いなテクニックのひとつです なのにですね、あちこちで超見かけるんですよ。 検索かけても「便利！」という言葉がたくさん並んでいるんです。 超嫌いなんですが、いったいどこから湧いたテクニックなのかわからない。 そこで、時間を見つけて調べようと思って、タイトルを書くだけ書いたら1年溶けてました そろそろ廃れる頃合いだと思うのですが、現在Webサイト制作の勉強をしている初学者間では、いまだにメインストリームを歩んでいるっぽいので、流行りに乗り遅れたなあと思いつつ、つらつら調べてみました。 html { font-size: 62.5%; } の概要 フォントサイズをピクセルで指定した場合、ユーザーがブラウザ設定でフォントサイズを変更していてもフォントの大きさは変わりません。 はっきり言ってアクセシ
フォントが大好物な人に朗報🎉 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ！！
まさかまさかの朗報です！ MORISAWA BIZ UDゴシックとMORISAWA BIZ UD明朝がGitHubにオープンソースのOFLで公開されています！！！ アップデート情報 4/1 Google Fontsで利用できるようになりました！ Morisawa Inc. -Google Fonts 3/29 v1.001, v1.002がリリースされ、不具合が修正されました。 3/24 HTMLやCSS、JavaScriptなどコードを書く人にどうぞ。 仕事早っ！！ オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース MORISAWA BIZ UDフォントとは GitHubで公開されているMORISAWA BIZ UDフォント MORISAWA BIZ UDフォントのダウンロード MORISAWA BIZ UDフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本人プログラマー向けコーディングフォント「Bizin Gothic」が無償公開／「Ricty」でもお馴染みの「Inconsolata」と読みやすい「BIZ UDゴシック」をかけ合わせ
GitHub - yuru7/moralerspace: Moralerspace は、欧文フォント Monaspace と日本語フォント IBM Plex Sans JP 等を合成したプログラミング向けフォントです。
日本人開発者向けの最適解？ GitHubフォント＋IBM日本語フォント＝「Moralerspace」【4月1日追記】／「Monaspace」と「IBM Plex Sans JP」をかけ合わせ、5スタイル×6つの全半角調整【レビュー】
全部、商用利用も無料！ Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適
Google Fontsに新しい日本語フォントが追加されました！ 和のデザインにぴったりなかわいいフォント -だるまどろっぷ
商用利用無料！ 毛筆・筆文字、ペン字、マジック、手書きの日本語フリーフォント 総まとめ
