先般、当協議会所属のフォント技術のエキスパートから、MJ明朝体フォントをWOFF化するサービスを提供しているサイトがある、MJ明朝体フォントの使用許諾契約に違反しているのではないか、との指摘があった。事務局長や対外窓口をお願いしている理事の方とも相談して、このサイトのオーナーに連絡を取り、MJ明朝体決め打ちのサービスについては、公開を差し控えていただいた。 ぼく的には、フォントをWOFF化するサービスの必要性もよく分かるし、協議会としても、WOFF化やサブセットフォントの提供など、協議会として直接行うか、協議会メンバーのフォントベンダー各社にビジネスとしてやっていただくかも含めて、具体的な方策を検討しているところだ。 ちょうどいい機会なので、MJ明朝体フォントの使用許諾契約書の成立の経緯と、ついでに、フォントの知的所有権を巡るず〜っと以前のぼくの経験を書き記しておきたい。 そう考えて、経緯
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
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
wavefont
wavefont A typeface for rendering vertical bars data: waveforms, spectrums, diagrams, histograms, columns etc. Playground • Google fonts • V-fonts • Wavearea Usage Place Wavefont[ROND,YELA,wght].woff2 into your project directory and use this code: <style> @font-face { font-family: wavefont; font-display: block; src: url(./Wavefont[ROND,YELA,wght].woff2) format('woff2'); } .wavefont { --wght:
みなさん、こんにちは！株式会社JMDCでプロダクト開発部に所属し、バックエンドの開発を担当している吉川（@yoshiyu0922）です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 19日目の記事です。 認証を実現する場合にCognitoやFirebaseなどIDaaSを利用することが多いと思いますが、KeycloakやzitadelなどOSSも多数存在しています。今回は技術検証の一環で、Oryをさわってみたので所感を書いていこうと思います。 Oryとは？ Oryとは認証・認可を提供するOSSでモジュール形式で提供しており、4つのエコシステムで構成しています。（公式ドキュメントはこちらです） Ory Kratos：ID管理サーバー Ory Hydra：OAuth 2.0とOpenID Conne
「IPAフォントライセンスを巡って」について思うところ 1 - Ryusei’s Notes (a.k.a. M59のブログ)
IPAフォントライセンスを巡って | 一般社団法人 文字情報技術促進協議会 IPAフォントライセンス1は、Open Source Initiative (OSI) から、The Open Source Definition (OSD) 2に準拠しているという認定を受けているという触れ込みだった。3 だから、ライセンスを理由にMJ明朝体フォントを利用したサービスを差し止めるというのは不可解なことに思える。いったい、これはどういうことなんだろうか。この記事を読んで、次のような疑問が浮かんだ。 IPAmj明朝をWebフォントとして利用することは、IPAフォントライセンス上問題となるのか。 IPAmj明朝をWOFF化するサービスは、IPAフォントライセンス上問題となるのか。 サブセットフォントは包摂基準を変えるのか。 以下では、上記疑問のうち、1と2について考えてみたい。3については、別の記事にす
もう迷わない！OpenTypeフォントとTrueTypeフォントの使い分け｜ヒラギノフォント公式note
フォントを購入するときや使うとき、フォントフォーマット（フォント形式）の違いについて悩んだことはありませんか？OpenTypeフォントとTrueTypeフォントでどちらを選ぶか、悩んだことがあるデザイナー・プログラマーの方もいらっしゃるかもしれません。 OpenTypeフォントとTrueTypeフォントはどちらにも誕生の経緯や役割があり、特定のニーズや用途によって適切なフォーマットが異なります。結論からいえば、OpenTypeフォントはタイポグラフィ・組版などのデザイン性が重視される領域、TrueTypeフォントは組込みなどの互換性や汎用性が求められる領域で採用されることが多いといえます。そしてOpenTypeフォントとTrueTypeフォントから選べる場合は、ご自身の目的や用途に合わせてフォーマットを選ぶことが重要となります。では、なぜフォントフォーマットの違いが生まれたのでしょうか。ま
なんJ AdGuard部 Wiki*
$domain 指定のドメインかそのサブドメインが発行元（コンテキスト）の場合にのみ、ルールを適用するように制限します。 複数のドメインを指定する場合は「|」、除外には「~」、eTLDで「*」が使用できます。 また、正規表現も使用できます。正規表現では / と $ と | を \ でエスケープする必要があります。 Safariは、許可ドメインと不許可ドメインの同時使用をサポートしていないため、||example.com^$domain=example.com|~hoge.example.orgのようなルールは、AdGuard for iOSおよびAdGuard for Safariでは機能しません。 例 ||example.com^$domain=example.org example.orgとそのサブドメインでexample.comのリクエストをブロックする ||example.com^
先日の「サマサン・ドノクン」に続いて、「ピグモ00」「マメロン」「廻想体」「金畫字」など、人気が高いフリーフォントをたくさんリリースされているもじワク研究さんから、さらに新作のフリーフォントがリリースされました！ 今回の「ポプらむ☆キウイ」はJIS第1水準漢字＋αが揃ったかわいい極太フリーフォントで、オープンソースで利用できます。 ポプらむ☆キウイ ではさっそく、フォントのダウンロード方法を。 下記ページにアクセスし、ページ下部「キウイ皮ごと囓る」の下「Download」をクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。 ポプらむ☆キウイ ライセンスはSIL Open Font Licenseで、個人でも商用でも無料で利用できます。詳しくは、ダウンロードファイル「仕様説明.txt」をご覧ください。 ダウンロードできるフォントのフォーマットは、下記の通り。 .otf
結論 結論から話します。サブセット化してウェブサイトにフォント適用するまでに以下の流れが必要です。 Google FontsからはCJKjpはダウンロードできないのでこのGitHubから落とす（設置してくださってる方、本当にありがとうございます🙏）第一水準とか人名漢字とか入れたい文字を定義しておくサブセットフォントメーカーでフォントファイル作成WOFFコンバータでwoff版作成CSSで@font-faceの指定 以降、丁寧に説明してきます。時間ない人は必要なところだけ読んでね。 サブセット化とは？ フォントデータから必要な文字データのみに限定して、オリジナルのフォントデータにまとめなおすことをサブセット化といいます。たとえば「國（国の旧字体）」といった文字はなかなか使わないと思うので、この手の文字一式を削ぎ落としてサブセット化することでフォントデータを軽量化でき、ウェブサイトの読み込み高
フォントを様々な形式に変換する fontconv を作りました。 .ttf, .otf, .svg, .woff, .woff2 の相互変換とサブセット化に対応しています。.eot も出力だけは対応しています。 なぜ作ったかというと、フォントを Web 上で利用するための woff2 最適化に苦労したからです。 私の場合は以前 ttf2svg を自作したので、 ttf2svg -> svg2woff2 の2回で woff2 は最適化できるようにしていたのですが、 巷のアイコンは woff2 形式でしか配布されていないことがあることに気付きました。 これがなかなか強敵で、woff2 をロードして最適化した後、 woff2 へ再変換できるライブラリが見つかりませんでした。 具体例を上げれば Material Icons の最適化は大変で、びっくりしました。 さすがにこれはおかしいなと思い、様々
最近のウェブサイト制作で実際に使用しているWebツールや情報記事などを12個紹介します。地味だけど便利に使えるものばかりなので、ぜひ参考にしてみてください。 画像サイズ変更ツール クライアントからいただいた写真が大きすぎることがあるので、作業前に画像サイズ変更ツールを使って、利用しやすいサイズに変更しています。 複数画像をドラッグ&ドロップして、画像サイズの最大幅を指定するだけ。複数の画像を一括でサイズ変更してくれるのはかなり嬉しい。 JPG、PNG、GIFに対応しています。 画像サイズ変更ツール 文字数カウント クライアントに文章を用意していただくときに使用しています。 文章量は、画像や動画、レイアウトなど、文章の周辺にある要素とのバランスを見ながら決めています。その文字数をワイヤーフレームに記載するさいに、文字数カウントツールを使用しています。 「空白と改行をふくむ文字数」「空白と改行
Get All That Network Activity Under Control with Priority Hints
Get All That Network Activity Under Control with Priority Hints The browser is very good at prioritizing resources requests on its own. But it's not always great. Priority hints makes it easy to provide explicit instructions as to how and in what network activity occurs. Open up the browser's network tab and you'll see a lot of activity. Assets are being downloaded, information's being submitted,
Your Cache Headers Could Probably be More Aggressive It's common for modern hosts to cache static assets in a flexible, but not most optimal way. Let's explore why that is and what we can do to push cache performance (for some assets) even further. We've got it real good when it comes to standing up websites these days (especially static ones). Modern hosts like Vercel and Netlify take care of a l
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IPAフォントライセンスを巡って | 一般社団法人 文字情報技術促進協議会
ID認証のOSS、Oryをさわってみた - JMDC TECH BLOG
商用利用無料！ 極太フォントでかわいい、漢字も揃っているキウイ皮ごと囓るのフリーフォント「ポプらむ☆キウイ」
【2023年版】NotoSansCJKjpをサブセット化する | techlab / baigie
フォントを様々な形式に変換する fontconv を作った
サイト制作で実際に使用している地味に便利なWebツールなど12個紹介してみる | BUILD Journal
Your Cache Headers Could Probably be More Aggressive