普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
Cloudflare Fonts: enhancing website font privacy and speed
Cloudflare Fonts: enhancing website font privacy and speed09/25/2023 This post is also available in 简体中文, 繁體中文, 日本語 and 한국어. We are thrilled to introduce Cloudflare Fonts! In the coming weeks sites that use Google Fonts will be able to effortlessly load their fonts from the site’s own domain rather than from Google. All at a click of a button. This enhances both privacy and performance. It enhance
Mac と Windows に無償で付属してくる日本語フォントに「游ゴシック」があります。両環境で共通して利用できる希少な「日本語」のデバイスフォントであることから重宝され、ウェブサイトでもCSSのローカルフォント参照で利用されるケースがありました。 「サイトの書体に “游ゴシック” を適用させるCSS記述方法」のような記事は最近になっても大変多く、あたかもMac・Windowsの全てのブラウザで表示可能と錯覚してしまいがちなのですが、 結論から言うと Mac の Safari・Brave・Firefox（プライベートウィンドウ）ではもうローカルフォントとしての「游ゴシック」をウェブサイトの表示に使うことはできません。（Safariにおいては5年前の macOS Mojave 以降から使えなくなっているはず…。） フィンガープリントなぜそんな事態になっているかと言うと、最近のブラウザ界隈の
日本語webフォントを使うにあたっての所感
普段、クライアントワークから自主制作まで制作において日本語のwebフォントを使うということがよくある。その際に、なるべく豊かな表現をしたいと思う。けれどもなかなかうまくいかない。それはなぜだろうか。各サービスの内部では、議論が行われていて日々改善がなされているのだと思う。 そういった循環の中で、1人のユーザーとしての考えを書くことで貢献できればと思う。 なるべく公共的な議論になるように心がけるが、内容はあくまでも個人的な所感として書いていく。（１ユーザーのサンプルとしても読んでもらえると思う）デザイナーやエンジニア向けの記事というよりは、趣旨としては長年日本語webフォントを使ってきた1ユーザーによる配信サービスやファウンダリに向けた感想という感じだろうか。 まずは、先人たちの努力によって数々の日本語のwebフォントの配信サービスが生まれて運営されてその上で、かつてはweb上では見ることが
みなさんこんにちは。 いきなりですが、先週2月22日は何ニャンの日だったでしょうか？？ そうです！ ２２２ニャンニャンニャンでねこの日です。 愛猫家の方たち共通の祝日ですね。 私自身もねこを2匹飼っておりまして、毎年ねこの日は贅沢おやつのフルコースを振舞う日です。 ねこちゃんにとっては、一大イベント！ 大興奮の特別な日なのです★ （ちなみに、2が6つ並んだことでスーパーねこの日と呼ばれた2022年2月22日には、我が家では全自動猫トイレをプレゼントしました！） あ、ねこの話が止まらなくなりそうなので、本題に移りましょう！笑 なぜフォントメーカーであるイワタが、ねこの日をご紹介するかというと・・・ (ﾟДﾟ)！！？！？？この書籍、みなさん一度は見たことあるのではないでしょうか？？ 実はすべて同じフォントを使っているのです！ このほかにも、ねこが登場する書籍の採用事例がたくさんあるので、後半で
今回はfontの最適化についてです。 最近は静的なページならastroがかなり強いと思いますがweb fontの最適化は考える余地があります。 今回はそんなfontを最適化する話です。 問題 最初はAstroの公式に載っている方法でFontsourceを入れてやっていました。 --- import '@fontsource/noto-sans-jp/400.css' import '@fontsource/noto-sans-jp/500.css' import '@fontsource/noto-sans-jp/700.css' import '@fontsource/noto-serif-jp/700.css' --- 結果 webfontを入れる前は100点だったのですが、50点に急落。cssがレンダリングブロックしてるとのこと。 これは実は↑で読み込んだfontがバンドルされてるの
![[seo] web fontを最適化して100点取る - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae9382d4b069f9906552aba30ade0f688e4118f2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCc2VvJTVEJTIwd2ViJTIwZm9udCVFMyU4MiU5MiVFNiU5QyU4MCVFOSU4MSVBOSVFNSU4QyU5NiVFMyU4MSU5NyVFMyU4MSVBNjEwMCVFNyU4MiVCOSVFNSU4RiU5NiVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9M2Y0ODYwNDM0NDMwYTk1NGY4ZjkwNDU4NjBlOWI4M2M%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwd3d3eSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTU1ZTlmMzgzYzdkZmJiNGQ4MWMyMzBlYmFmNmZmZjI%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D457c41142800338dfbcbfa10a8a4222e)
この記事は「クソアプリ Advent Calendar 2023 その２」の１１日目の記事です。 作ったもの 上様に何か納品したときにお使いください 領収書（覚書）をPDFでダウンロードできます ※注意事項 金額はランダムです 日付は空です モチベーション PDFで書類を生成するシステムってよくあると思うのですが、地味に大変ですよね。 各言語で各種便利なPDF操作ライブラリがあって、それにデータを埋め込みつつ書類を作って、いざ書き出してみたら盛大にずれてたとか、デプロイした環境に日本語フォントがないだとか。 なんかもっと簡単にできないかなと思ってたのですが、HTMLで書類を作ってブラウザで印刷プレビューして、その内容がそのままPDFになればいろいろ楽なのではないかと思いました。 書類のHTMLのURLさえあれば、そのURLをヘッドレスChromeあたりが見に行ってくれてPDF保存してくれる
先に結論 スクリプトの読み込み部分に is:inline を入れるだけで OK。検証していないけれど TypeSquare 等の Web フォントも同様のやり方で読み込めると思う。 <head> <script is:inline src="https://webfont.fontplus.jp/accessor/script/fontplus.js?..." ></script> </head> なぜなのか Astro では Web フォントに限らず、外部スクリプトの読み込み時は is:inline をつける必要がある。そうしないと Astro でスクリプトの処理・最適化・バンドルが走ってしまい、期待通りの挙動にはならない模様。 外部スクリプトをロードする – Astro Docs View Transitions を導入する場合 View Transitions を使用する場合は、ペー
今回利用するスプレッドシート Vuetify - A Material Design Framework for Vue.js MaterialDesignIcons.css Version 7.2.96 サンプルスプレッドシート 現時点でホームページに日本語の翻訳資料が掲載されておらず（v2は日本語が用意されてるのに）、いくつかの重要なコンポーネントが存在していないという有様なのと、Vue3の破壊的変更についてこれずに他のライブラリも移行が進まずという現状が垣間見れます。Vue3に関しては以下の記事を参考にしてみてください。 Google Apps ScriptでVue3を検証してみた【GAS】 Vuetify3の利用上の注意点 利用するCDNのファイル リリースされたとは言え、現状ではコンポーネントの数が半分程度しか揃っておらず、BetaリリースのLabsで提供されてるものが一部ある状
※下記の内容は、記事執筆時点での内容です。現在は異なっている場合がありますので、ご了承下さい。 このWebサイトでは、「FONTPLUS」を導入しております。 Content-Security-Policy (CSP) を導入するには、ソース配信元のURLをヘッダーに追記しないといけないのですが、 この件について問い合わせしたところ、下記のように設定すると良いとのことでしたので、メモしておきます。 style-src 'unsafe-inline'; script-src https://webfont.fontplus.jp; font-src https://webfont.fontplus.jp https://s3-ap-northeast-1.amazonaws.com/fp-bf/; 現在、このWebサイトにも同様の設定を行っておりますが、問題なく動作しております。 ※：sty
トラヤヌスの碑文ローマン体の歴史は古く、紀元前の古代ローマ時代にはすでに現在の形状とほぼ変わらない大文字のアルファベットが存在していました（J, W, Uを除く）。トラヤヌスの碑文は、その時代の文字が現在も保存状態が良く残っており、かつ完成度が高いため、すべてのローマ大文字の淵源と言われています。 画像引用元： この記事にあるように、私も以前現地に行きましたが、文字が高い位置にあるのであまり近くで見ることができませんでしたが、新宿私塾の木村先生の原寸拓本採取までされる執念には本当に関心します。（新宿私塾は私も以前受講していました） ヴェネチアン・ローマン（1400年代）活版印刷が発明されたルネサンスの時代にイタリアのヴェネチアの印刷所で使われたローマン体です。「O, C, D, G」などの軸が斜めに傾いていて、「e」の横線は右肩上がりになっています。 オールド・ローマン（1400〜1500
ディレクターさん、デザイナーさんから指定されたフォントを埋め込みしたけど反映されない、、、 そんなエラーに悩まされたこと、ありませんか？ この記事では、よくあるエラーを2つ紹介して、対策までご紹介していきます。 さっそく見ていきましょう！ ①半角文字が全角になっている slackなどのチャットアプリを使って埋め込みコードを渡すと、文字列をコピーするときに全角になってしまいます。 以下はslackからコピペしたコードです。(コピペしてみると『’』が全角の『’』になっています) /* slackからコピペしたコード */</code> <script> (function(d) { var config = { kitId: '〇〇〇〇〇〇〇', <code><span style="color: var(--hcb-color--text,#1f1e1e); font-family: var
Vue+Firebaseで作ったフロントエンドアプリのバンドルサイズを削減する – rinoguchi's techlog
Vue+Typescript+FirebaseでChrome拡張を作っているのですが、バンドルサイズが大きいよと警告が出たので対応しようと思います。 使っている技術 Chrome Extension Vue+Vuetify TypeScript Firebase Authentication Cloud Firestore ワーニングの内容 npm run build（cross-env NODE_ENV=production webpack --hide-modules）で本番用のコードを出力してみたところ、バンドルサイズが推奨サイズ（244 KB）を超えているというワーニングが出ました。 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). Thi
ウェブフォントを最適化する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 前のモジュールでは、HTML、CSS、JavaScript、メディア リソースを最適化する方法について学習しました。このモジュールでは、ウェブフォントを最適化する方法について学習します。 ウェブフォントは、読み込み時間とレンダリング時間の両方でページのパフォーマンスに影響を与える可能性があります。サイズの大きいフォント ファイルはダウンロードに時間がかかり、First Contentful Paint（FCP）に悪影響を及ぼす可能性があります。一方、誤った font-display 値が原因で、ページの Cumulative Layout Shift（CLS）の原因となる望ましくないレイアウト シフトが発生する可能性があります。 ウェブフォントを最適化する前に、ブラウザによってウェ
この記事は 2024 年 2 月 10 日に投稿しました。 目次 はじめに Vuetify3 でツールバーの左側にハンバーガーメニューアイコンを表示する おわりに リンク 1. はじめに こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。 今回は業務で使用しているVuetify3でツールバーの左側にハンバーガーメニューアイコンを表示する方法についてです。 目次へ 2. Vuetify3でツールバーの左側にハンバーガーメニューアイコンを表示する Vuetify3でツールバーの左側にハンバーガーメニューアイコンを表示するには、以下のような実装にします。 実装例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devic
Webフォントをサブセット化してセルフホスティングする際の注意点 フォントをサブセット化してセルフホスティングする事はフォントデータの改変・再配布になる可能性があるので、使用したいフォントのライセンスを確認してください。 今回はSILオープンフォントライセンスで利用・改変・再配布OKのGoogle fontsのNoto Sans Japaneseを使用します。 Google fontsのサイトから直接フォントデータをダウンロードしてサブセット化する事もできますが、フォントの見た目が少し変わってしまう場合があるので、フォントの見た目が変わらない方法でご紹介します。 ①フォントのダウンロード まずは「google-webfonts-helper」サイトから必要なフォントを検索してファイルをダウンロードします。 https://gwfh.mranftl.com/fonts 「1. Select
Webフォントをサーバーにアップロードして読み込む方法
みなさんはWebフォントを利用していますでしょうか？ 外部から読み込むと、ページの読み込み速度を下げてしまう可能性があります。 当ブログではGoogle Fontsをサーバーにアップロード、使うものだけを限定して読み込んでいます。 今回はWebフォントをローカル(内部)にアップロードして読み込む方法を解説します。
フォントに関するおすすめの方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 この記事では、フォントのパフォーマンスに関するベスト プラクティスについて説明します。ウェブフォントはさまざまな形でパフォーマンスに影響します。 テキストの表示の遅延: ウェブフォントが読み込まれていない場合、ブラウザは通常、テキストの表示を遅らせます。多くの場合、これにより First Contentful Paint（FCP）が遅延します。これにより、状況によっては Largest Contentful Paint（LCP）が遅延することがあります。 レイアウト シフト: フォントを入れ替えるとレイアウト シフトが生じる可能性があり、Cumulative Layout Shift（CLS）に影響します。このようなレイアウト シフトは、ウェブフォントとその代替フォントがページ
#Tags | blog.jxck.io
3pca 2023-12-30 3PCA 最終日: 3rd Party Cookie 亡き後の Web はどうなるか? 2023-12-29 3PCA 27 日目: FedCM 2023-12-28 3PCA 26 日目: Related Website Sets 2023-12-27 3PCA 25 日目: Measurement 2023-12-26 3PCA 24 日目: Retargeting 2023-12-25 3PCA 23 日目: Interest Based Advertising 2023-12-24 3PCA 22 日目: Privacy Sandbox 2023-12-21 3PCA 21 日目: SameSite Cookie 2023-12-20 3PCA 20 日目: 3rd Party Cookie Deprecation 2023-12-19 3PCA 1
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
ウェブサイトでローカルフォントの「游ゴシック」はもう使えない｜Takehiko Ono
ねこに合うフォントを知っていますか？｜株式会社イワタ ＊ フォントメーカー＊
[seo] web fontを最適化して100点取る - Qiita
【クソアプリ】江戸時代もDX！?上様への納品物の領収証をPDFで発行してもらえるサービス - Qiita
Astro で FONTPLUS の Web フォントを読み込む
Google Apps ScriptでVuetify3を検証する【GAS】 🌴 officeの杜 🥥
FONTPLUS 導入環境で Content-Security-Policy (CSP) を導入するには
ジオメトリックなローマン体を目指して10年間ちょっとずつ作ってた書体の話｜Koji Kimura
Google・Adobeフォントが反映されない？ 正しい埋め込み方解説！ | masakichi-code
ウェブフォントを最適化する | web.dev
Vuetify3 でツールバーの左側にハンバーガーメニューアイコンを表示する - プログラムを書こう！
Webフォントを軽量化する！サブセット化とセルフホスティング |東京のWeb制作会社｜株式会社ENVY DESIGN
フォントに関するおすすめの方法 | Articles | web.dev