ウェブフォントとパフォーマンスの両立を諦めない
ウェブページのパフォーマンス向上を目指す場合、ウェブフォント（特に和文フォント）の使用は避けるべきと言われます。これは、ウェブフォントのファイルサイズが大きく、ページの読み込み速度に大きな影響を与えるためです。 しかし、デザイン上の要件やブランディングの観点から、ウェブフォントの使用が必要不可欠なケースもあるでしょう。本記事では、ウェブフォントを使用しながら、できる限りパフォーマンスを最適化するためのヒントをご紹介します。 検証環境 使用フォント: Google Fonts の Noto Sans JP 開発環境: Next.js 測定ツール: Lighthouse 説明の都合上、First Input Delay (FID) など、古い指標についても言及します 和文フォントが重いのはなぜか 欧文フォントと和文フォントには、収録文字数に違いがあります。欧文フォントはラテン文字と記号で約 1
Note: I received a lot of great feedback from the discussions at Mastodon and Hacker News, so I've updated the post with some improvements to the font! I've also added some further examples and acknowledgements at the end. Syntax Highlighting in Hand-Coded Websites The problem I have been trying to identify practical reasons why hand-coding websites with HTML and CSS is so hard (by hand-coding, I
font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。 font-variantプロパティを適用するには、使用するフォントが対応するOpenType機能をサポートしている必要があります。サポートされていない場合、指定したプロパティが適用されないことがあります。 font-variant-east-asian font-variant-east-asianプロパティはその名の通り、日本語や中国語など、東アジアの文字の字形を指定できます。指定できる値はいくつかありますが、その中から2つを紹介します。 fon
Announcing Official Puppeteer Support for Firefox – Mozilla Hacks - the Web developer blog
We’re pleased to announce that, as of version 23, the Puppeteer browser automation library now has first-class support for Firefox. This means that it’s now easy to write automation and perform end-to-end testing using Puppeteer, and run against both Chrome and Firefox. How to Use Puppeteer With Firefox To get started, simply set the product to “firefox” when starting Puppeteer: import puppeteer f
ありそうでなかった！Power Appsから直接SharePointのドキュメントライブラリにアップロードするコンポーネントを作成する - Qiita
Table( { FileType: "accdb", Extention: "accdb" }, { FileType: "accdb", Extention: "mdb" }, { FileType: "archive", Extention: "7z" }, { FileType: "archive", Extention: "ace" }, { FileType: "archive", Extention: "arc" }, { FileType: "archive", Extention: "arj" }, { FileType: "archive", Extention: "dmg" }, { FileType: "archive", Extention: "gz" }, { FileType: "archive", Extention: "iso" }, { FileType
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
もう迷わない！OpenTypeフォントとTrueTypeフォントの使い分け｜ヒラギノフォント公式note
フォントを購入するときや使うとき、フォントフォーマット（フォント形式）の違いについて悩んだことはありませんか？OpenTypeフォントとTrueTypeフォントでどちらを選ぶか、悩んだことがあるデザイナー・プログラマーの方もいらっしゃるかもしれません。 OpenTypeフォントとTrueTypeフォントはどちらにも誕生の経緯や役割があり、特定のニーズや用途によって適切なフォーマットが異なります。結論からいえば、OpenTypeフォントはタイポグラフィ・組版などのデザイン性が重視される領域、TrueTypeフォントは組込みなどの互換性や汎用性が求められる領域で採用されることが多いといえます。そしてOpenTypeフォントとTrueTypeフォントから選べる場合は、ご自身の目的や用途に合わせてフォーマットを選ぶことが重要となります。では、なぜフォントフォーマットの違いが生まれたのでしょうか。ま
Flux は、私たちが初めて開発したバリアブルフォントです。 今日、より多くの人が写真や動画を撮影し、編集し、公開するようになりました。 このプロセスで多様な書体が使われていますが、観察やヒアリングを通して、ある課題が浮かび上がってきました。それは、フォントに精通していない人にとって、特徴的な書体は自身の創作物とのコンビネーションが難しく、ユニバーサルな書体はその微細な違いを比較・選定することが難しいという点です。 ——私たちならではの視点で、それぞれのクリエイターにフィットする書体が作れないか？これが kern typefaces を通して試みたい実験であり、Flux をリリースした理由です。 Flux は、大きく分けてサンセリフ、フレア、セミセリフ、セリフ、エクストラセリフという5つの表情を持ちます。ニュートラルなサンセリフから膨らみを持つフレアへ、さらにセミセリフ、セリフへと変化し、
State of Text Rendering 2024
Preface In 2009 I wrote State of Text Rendering, as a high-level review of the Free Software text rendering stack, with a focus on shaping, and mostly in the context of the GNOME Desktop. Since then, I have spent around twelve years working on various Google products to improve fonts and text rendering: all Open Source work. When I wrote that text in 2009, my main assignment was to finish HarfBuzz
Cloudflareは誰でも使えるBot対策を一つの特徴としています。それこそクレジットカード不要でCDN/WAFとセットでBot対策を導入可能です。 これはインターネット上の基本セキュリティは基本的人権と同様にすべての人が必要（ただし不正コンテンツ等犯罪や違法な利用は除く）というCloudflareの基本的思想に基づいています。 Bot Fight Mode Super Bot Fight Mode Bot Management for Enterprise Turnstile AIndependence Bot Fight Mode ドメイン上のボット トラフィックを検出して軽減するのに役立つよう設計されています。無料を含むすべてのプランで利用可能で、既知のボットのトラフィックマッチングパターンを識別します。 これらのボットに応答して計算コストの高いチャレンジ（人手による操作を要求する
先日の「サマサン・ドノクン」に続いて、「ピグモ00」「マメロン」「廻想体」「金畫字」など、人気が高いフリーフォントをたくさんリリースされているもじワク研究さんから、さらに新作のフリーフォントがリリースされました！ 今回の「ポプらむ☆キウイ」はJIS第1水準漢字＋αが揃ったかわいい極太フリーフォントで、オープンソースで利用できます。 ポプらむ☆キウイ ではさっそく、フォントのダウンロード方法を。 下記ページにアクセスし、ページ下部「キウイ皮ごと囓る」の下「Download」をクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。 ポプらむ☆キウイ ライセンスはSIL Open Font Licenseで、個人でも商用でも無料で利用できます。詳しくは、ダウンロードファイル「仕様説明.txt」をご覧ください。 ダウンロードできるフォントのフォーマットは、下記の通り。 .otf
UDフォントって？ ウェブフォント選定の極意！基本から最新トレンドまで徹底解説 | 【レポート】デジタルマーケターズサミット2024 Summer
印象のほかに、フォントの重要な役割として「情報を伝えること」がある。そのため、「読みやすさ」は重要な要件だ。それを強く意識して開発されたフォントとして「ユニバーサルデザインフォント（UDフォント）」が注目されている。 もとはディスレクシア（文字の認識に問題があり、長い文章を読むことが苦手になる障害）の傾向がある人や、弱視で細い字が苦手という人でも、読みやすいようにデザインされた。さらに一歩進んで障害の有無や年齢などにかかわらず、“誰にとっても使いやすい”デザインを目指す「ユニバーサルデザイン」の考え方に基づくようになった。可読性や視認性、判読性に優れ、近年は種類も増えて利用しやすくなり、公共性の高いWebサイトを中心に活用例が増えてきているという。 UDフォントは、さまざまなフォント作成会社が力を入れているが、とりわけ「モリサワ」は実験や調査を積極的に行なっており、論文やレポートがサイト上
NGINX: try_files is evil too by Danila Vershinin, February 18, 2020 , revisited on January 24, 2025 We have by far the largest RPM repository with NGINX module packages and VMODs for Varnish. If you want to install NGINX, Varnish, and lots of useful performance/security software with smooth yum upgrades for production use, this is the repository for you. Active subscription is required. The benefi
Windows Terminalには、Cascadia Codeと呼ばれるOpenTypeフォントが付属する。このフォントは、Windows Terminalと同時に開発された、いわば「専用」フォントだ。オープンソース・プロジェクトのプロジェクト名としてはCascadia-Codeとなっている。しかし、この名称は、このフォントの1つのバリエーションであるプログラマ向け合字を持つフォント名でもあるため、ここでは、プロジェクトが提供するフォント全体を「Cascadiaフォント」と表記する。今回は、このCascadiaフォントを使って、Windows Terminalのフォント機能について解説する。ただし、フォント設定などには、OpenTypeの基本的な知識が必要になる。ここでは、まず、OpenTypeやその実装例としてのCascadiaフォントに関して解説を行い、次回、具体的な設定を解説するこ
フォントを様々な形式に変換する fontconv を作りました。 .ttf, .otf, .svg, .woff, .woff2 の相互変換とサブセット化に対応しています。.eot も出力だけは対応しています。 なぜ作ったかというと、フォントを Web 上で利用するための woff2 最適化に苦労したからです。 私の場合は以前 ttf2svg を自作したので、 ttf2svg -> svg2woff2 の2回で woff2 は最適化できるようにしていたのですが、 巷のアイコンは woff2 形式でしか配布されていないことがあることに気付きました。 これがなかなか強敵で、woff2 をロードして最適化した後、 woff2 へ再変換できるライブラリが見つかりませんでした。 具体例を上げれば Material Icons の最適化は大変で、びっくりしました。 さすがにこれはおかしいなと思い、様々
Case Study — Using a JavaScript component inside a Haskell application | The Haskell Programming Language's blog
Mateusz Goślinowski January 08, 2025 [GHC] #javascript #case-study GHC since version 9.8 allows us to create callbacks from JS to Haskell code, which enables us to create full-fledged browser apps. This article shows how to use the JS backend with foreign component libraries. repository: https://github.com/Swordlash/halogen-blog ghc used: javascript-unknown-ghcjs-ghc-9.12.1 (ghcup) Preface Any use
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font with Built-In Syntax Highlighting
フォントをもっと自由に！ CSSのfont-variant活用術 - ICS MEDIA
React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
Flux 2 | kern typefaces
Bot 対策の基礎技術 : JA3 / 4 Fingerprinting
商用利用無料！ 極太フォントでかわいい、漢字も揃っているキウイ皮ごと囓るのフリーフォント「ポプらむ☆キウイ」
NGINX: try_files is evil too - GetPageSpeed
Windows Terminal ベスト設定 第16回「フォント指定」
フォントを様々な形式に変換する fontconv を作った