LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！ トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい

このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。

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

2023年1月現在、Qiitaのコードブロックでも採用されている有名な日本語対応プログラミング用フォントのRictyとRicty Diminishedが、2023年1月28日をもって「正式に」サポート終了しました。具体的には、配布ページの冒頭に、以下の文章が追加されています。 Ricty および Ricty Diminished は、2010 年代前半には欧文・和文合成プログラミング用フォントとして先駆的でしたが、現在は前時代的な存在となっています。不具合もいくつか確認されています。良質なプログラミング用フォントが数多く登場していますので、それらの利用をおすすめします。 よって今後は、他のフォントを使用するのが良いでしょう。 移行先の候補となるフォントの一覧もあるので、ぜひ確認してみてください。 経緯 RictyフォントとRicty Diminishedフォントは、プログラミング用フォント

ゴシック体 明朝体 丸ゴシック すべて カッコのみ 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/[email protected]/dist

Braveはフォントを取得できないようにした。いっぽうChromeはフォントを根刮ぎ取得しようとしている。ChromeGoogleSecuritybraveブラウザフィンガープリント JavaScriptから、現在表示されているフォントを取得することが可能です。 仕組みを簡単に説明すると、フォントによって文字の横幅は異なるので、font-familyを変えてみてwidthが変わったらそのフォントがインストールされている、みたいな識別方法です。 つまり、フォントを表示させて、そのフォントが入っているかどうかをチェックすることで、ブラウザフィンガープリントになります。 Braveはフォントを取得できないようにした How Brave defends against font fingerprintingの記事において、Braveはフォントによるフィンガープリント防止について解説しています。 H

proof of concept / Beta versions, not intended for production use!

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ḥ この字

Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、 Layout Shift が発生してしまう。 これを防ぐ方法として、 CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); asce

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 両

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「俺にはクールな画面は作れない」 そう思う人もいるかもしれません。 エンジニアが知っておきたい色についてのお話を見ていただいた方はおわかり頂けたことと思いますが、知識で補える部分もたくさんあるんです。 本当の話なんです・・・そう、フォントの話なんです。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です フォントの種類を知る 適切なフォントを選ぶためにはまずフォントの種類を知る必要があります。 専門家からするともっとたくさん分類はあるのかもしれませんが、エンジニア視点（私視点）だ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

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 対応を始めていることもあ

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 は、特に日本語のように文字数が多い場合、ファイルが大きくなる。

About Webフォントとは？ デバイスを選ばない表現 本来、Webブラウザは各端末にインストールされているフォントで文字を表示しています。 Webフォントではインターネットを介しフォントを配信することでフォントの置換えを防ぎます。 つまり“伝えたいこと”を意図したまま伝えることが出来るのです。

マイナンバー導入に向けてのマストソリューション。 What is Security Font? Security Font（セキュリティフォント）とは？ コンピュータで文字はバイト表現である文字コードとして扱われています。文字コード体系にはISO-2022-JP(JISコード)や、Unicodeなど複数の種類があります。フォントはこの文字コードとキャラクタ(文字画像)を関連付けるデータです。 セキュリティフォントはフォントを適用することで、データを平文に戻さずに、暗号化したままで一時的に可読性を得ることができます。 運用中平文に戻す必要がないため、常にセキュリティの高い形でデータを保持することができます。 To whom recommend Security Font? こんな事を検討中、お悩みのクライアント様にSecurity Font（セキュリティフォント）をお勧めします。