不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
自作フォントでターミナルにちょってぃを表示したい!!
はじめに エンジニアのみなさん、フォントは何を使っていますか?。 筆者はターミナルの表示をかっこよくするために、FiraCode Nerd Fontを愛用しています。 今回はここにちょっと社のキャラクターである ちょってぃ を表示するために、自作フォントを作っていきます🚀。 フォントの規格 フォントを自由に追加できる範囲はUnicodeの規格で決まっています。 以下の画像の通りUnicodeではU+F0000–U+10FFFFまでが私用面として割り当てられています。 プログラミング用フォントとして使われているFiraCode Nerd FontなどはGitHubのフォントやブランチのフォントなど独自のフォントをこの私用面に割り当てています。 https://ja.wikipedia.org/wiki/私用面 今回作るフォントもUnicodeに従って私用面に作成します。 FontForge
RictyフォントとRicty Diminishedフォントが正式にサポート終了となった話 - Qiita
2023年1月現在、Qiitaのコードブロックでも採用されている有名な日本語対応プログラミング用フォントのRictyとRicty Diminishedが、2023年1月28日をもって「正式に」サポート終了しました。具体的には、配布ページの冒頭に、以下の文章が追加されています。 Ricty および Ricty Diminished は、2010 年代前半には欧文・和文合成プログラミング用フォントとして先駆的でしたが、現在は前時代的な存在となっています。不具合もいくつか確認されています。良質なプログラミング用フォントが数多く登場していますので、それらの利用をおすすめします。 よって今後は、他のフォントを使用するのが良いでしょう。 移行先の候補となるフォントの一覧もあるので、ぜひ確認してみてください。 経緯 RictyフォントとRicty Diminishedフォントは、プログラミング用フォント
Yaku Han JP - 約物半角専用のフォント
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.0.0/dist
Braveはフォントを取得できないようにした。いっぽうChromeはフォントを根刮ぎ取得しようとしている。 - Qiita
Braveはフォントを取得できないようにした。いっぽうChromeはフォントを根刮ぎ取得しようとしている。ChromeGoogleSecuritybraveブラウザフィンガープリント JavaScriptから、現在表示されているフォントを取得することが可能です。 仕組みを簡単に説明すると、フォントによって文字の横幅は異なるので、font-familyを変えてみてwidthが変わったらそのフォントがインストールされている、みたいな識別方法です。 つまり、フォントを表示させて、そのフォントが入っているかどうかをチェックすることで、ブラウザフィンガープリントになります。 Braveはフォントを取得できないようにした How Brave defends against font fingerprintingの記事において、Braveはフォントによるフィンガープリント防止について解説しています。 H
OpenMoji
proof of concept version, some glyphs are broken, not intended for production use!
macOS Big Sur では梵字が表示できる - Ryusei’s Notes (a.k.a. M59のブログ)
support.apple.com macOS Big Sur に組み込まれているフォント一覧を見ると、Noto Sans Siddhamがあることが分かる。これは悉曇文字、つまり寺院などで目にする梵字を収録したフォントだ。Font Bookやアプリのフォント一覧には表示されず、フォントフォールバック機能を介して使うことが前提になっているみたいだ。 フォントが入っていない人は https://github.com/googlefonts/noto-fonts/tree/main/hinted/ttf/NotoSansSiddham からフォントを入手できる。（NotoフォントはSIL Open Font Licenseの条件下で公開されている） 試しに、この記事にもいくつか梵字を載せておこう。（他にも 种子字 - 维基百科，自由的百科全书 にたくさん載っている。） 𑖭𑖾 saḥ この字
Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io
Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、 Layout Shift が発生してしまう。 これを防ぐ方法として、 CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); asce
Puppeteer で静的サイトの Font Subsetting | blog.jxck.io
Intro Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。 Web Font の静的サブセット 本サイトで提供している Web Font は当初、文字を事前に選定して生成したものを使っていた。 Noto Sans の Web Font 対応とサブセットによる最適化 当時はコンテンツがなかったが、コンテンツも増えた後は、コンテンツの原稿である markdown ファイルから使用している文字を抽出して生成するように変更していた。 これでおおよそ必要最小限のサイズにすることができていた。 Regular と Bold の最適化 本サイトでは Font Weight として Regular(400) と Bold(700) を提供しているが、これまでは抽出した文字種を Bold/Regular 両
エンジニアが知っておきたいフォントについてのお話 - Qiita
「俺にはクールな画面は作れない」 そう思う人もいるかもしれません。 エンジニアが知っておきたい色についてのお話を見ていただいた方はおわかり頂けたことと思いますが、知識で補える部分もたくさんあるんです。 本当の話なんです・・・そう、フォントの話なんです。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です フォントの種類を知る 適切なフォントを選ぶためにはまずフォントの種類を知る必要があります。 専門家からするともっとたくさん分類はあるのかもしれませんが、エンジニア視点（私視点）だと大きく以下の分類があると思っています。 セリフ体 or サンセリフ体 プロポーショナル or モノスペース（等幅） 英字 or 和文 ＃英語、日本語以外の言語対応はした経験がないので他の言語はわかりません・・・ セリフ体 or サンセリフ体 左側がセリフ体
WebFont の WOFF2 対応によるサイズ最適化 | blog.jxck.io
Intro Safari 10.0 から WOFF2 がサポートされており、これをもって IE 以外のメジャーブラウザではサポートが揃いつつある。 本サイトは WOFF 形式での Web Font を提供しているが、 WOFF2 形式では WOFF よりも 12% 程度圧縮率が高いため、本サイトでも WOFF2 に移行することとした。 フォーマット変更による効果について解説する。 WOFF File Format 2.0 本サイトでは、 Noto Sans CJK から必要なフォントのみを抽出したサブセットを、 WOFF 形式で読み込む構成を取っている。 Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io その後、必要な文字が増えフォントファイルを更新することにしたが、当時対応していなかった Safari が WOFF2 対応を始めているこ
Font Display プロパティを用いた FOIT/FOUT 最適化 | blog.jxck.io
Update この検証から 2 年程のちに、 First Paint/First Contentful Paint を重視するため、全ての display プロパティは swap に統一した。 その他 WebFont に関連する検証は web font タグにまとまっている。 Intro Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。 フォントファイルサイズが大きい場合は、 FOIT/FOUT の問題が顕著になり、 JS を用いた回避策が利用されることも多かった。 これを解決するため、 CSS に font-display プロパティが作成され、実装が進んでいる。 各プロパティの違いと挙動、そして本サイトへの適用について解説する。 Loading Web Font Web Font は、特に日本語のように文字数が多い場合、ファイルが大きく
Security Font（セキュリティフォント）
マイナンバー導入に向けてのマストソリューション。 What is Security Font? Security Font（セキュリティフォント）とは？ コンピュータで文字はバイト表現である文字コードとして扱われています。文字コード体系にはISO-2022-JP(JISコード)や、Unicodeなど複数の種類があります。フォントはこの文字コードとキャラクタ(文字画像)を関連付けるデータです。 セキュリティフォントはフォントを適用することで、データを平文に戻さずに、暗号化したままで一時的に可読性を得ることができます。 運用中平文に戻す必要がないため、常にセキュリティの高い形でデータを保持することができます。 To whom recommend Security Font? こんな事を検討中、お悩みのクライアント様にSecurity Font（セキュリティフォント）をお勧めします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今までありがとう！ 日本人プログラマー向けフォントの先駆者「Ricty」の開発が終了／優秀な後継者たちを評価してみてね【やじうまの杜】
tonsky/FiraCode: Monospaced font with programming ligatures
GitHub - miiton/Cica: プログラミング用日本語等幅フォント Cica(シカ)
GitHub - Superpencil/pokemon-font: pokemon-font is now Johto 🎊
Webフォント TypeSquare [タイプスクウェア] スペシャルサイト![Webフォント TypeSquare [タイプスクウェア] スペシャルサイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/b93ab5493bb839bb56a445e46bd644bd77832cd8/height=288;version=1;width=512/http%3A%2F%2Ftypesquare.com%2Fspecial%2Fassets%2Fimages%2Fogp.png)
ウェブ最大の「フォント問題」を巡ってアップル、グーグル、MS、アドビが団結
【画像あり】日本人にだけ読めないフォントｗｗｗｗｗｗｗｗｗｗｗｗｗ : キニ速