じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
Mac と Windows に無償で付属してくる日本語フォントに「游ゴシック」があります。両環境で共通して利用できる希少な「日本語」のデバイスフォントであることから重宝され、ウェブサイトでもCSSのローカルフォント参照で利用されるケースがありました。 「サイトの書体に “游ゴシック” を適用させるCSS記述方法」のような記事は最近になっても大変多く、あたかもMac・Windowsの全てのブラウザで表示可能と錯覚してしまいがちなのですが、 結論から言うと Mac の Safari・Brave・Firefox（プライベートウィンドウ）ではもうローカルフォントとしての「游ゴシック」をウェブサイトの表示に使うことはできません。（Safariにおいては5年前の macOS Mojave 以降から使えなくなっているはず…。） フィンガープリントなぜそんな事態になっているかと言うと、最近のブラウザ界隈の
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
モリサワ フォントサブスクリプションサービス「Morisawa Fonts」からWebフォントを2024年9月12日に提供開始 | ニュース&プレスリリース | 企業情報
モリサワ フォントサブスクリプションサービス「Morisawa Fonts」からWebフォントを2024年9月12日に提供開始 株式会社モリサワ（代表取締役社長：森澤彰彦 本社：大阪市浪速区敷津東2-6-25 Tel:06-6649-2151 代表、以下モリサワ）は、フォントサブスクリプションサービス「Morisawa Fonts」において、新たにWebフォントを2024年9月12日（木）に提供開始することを発表します。 この度のWebフォントの提供開始により、Morisawa Fontsは、共通のMorisawa IDでデスクトップフォントとWebフォントを購入・利用が可能となるプラットフォームへと進化します。今後、多様な媒体にまたがるデザインプロジェクトに、最適なサービスや機能を提供してまいります。 提供開始予定のWebフォントは、特定のフォントのスタイルを事前に登録して、必要なフォン
日本語webフォントを使うにあたっての所感
普段、クライアントワークから自主制作まで制作において日本語のwebフォントを使うということがよくある。その際に、なるべく豊かな表現をしたいと思う。けれどもなかなかうまくいかない。それはなぜだろうか。各サービスの内部では、議論が行われていて日々改善がなされているのだと思う。 そういった循環の中で、1人のユーザーとしての考えを書くことで貢献できればと思う。 なるべく公共的な議論になるように心がけるが、内容はあくまでも個人的な所感として書いていく。（１ユーザーのサンプルとしても読んでもらえると思う）デザイナーやエンジニア向けの記事というよりは、趣旨としては長年日本語webフォントを使ってきた1ユーザーによる配信サービスやファウンダリに向けた感想という感じだろうか。 まずは、先人たちの努力によって数々の日本語のwebフォントの配信サービスが生まれて運営されてその上で、かつてはweb上では見ることが
みなさんこんにちは。 いきなりですが、先週2月22日は何ニャンの日だったでしょうか？？ そうです！ ２２２ニャンニャンニャンでねこの日です。 愛猫家の方たち共通の祝日ですね。 私自身もねこを2匹飼っておりまして、毎年ねこの日は贅沢おやつのフルコースを振舞う日です。 ねこちゃんにとっては、一大イベント！ 大興奮の特別な日なのです★ （ちなみに、2が6つ並んだことでスーパーねこの日と呼ばれた2022年2月22日には、我が家では全自動猫トイレをプレゼントしました！） あ、ねこの話が止まらなくなりそうなので、本題に移りましょう！笑 なぜフォントメーカーであるイワタが、ねこの日をご紹介するかというと・・・ (ﾟДﾟ)！！？！？？この書籍、みなさん一度は見たことあるのではないでしょうか？？ 実はすべて同じフォントを使っているのです！ このほかにも、ねこが登場する書籍の採用事例がたくさんあるので、後半で
夏になると、しっかり調整したはずのサイトのコーディングで「ずれています」と連発して言われたことを思い出すもりさんです……。 Google Fontsにも日本語フォントがいくつか使えるようになり、ますますサイト制作しやすくなりました。 Google Fonts イントロダクション 夏のある時期、Google Fontsを利用したある案件を受けました。 さらに欧文や数字だけだったので、問題ないと考えてしました。 しかし…、何度調整しても「ずれている」と言われつづけることになったのです。 ずれる問題 問題は、文字の垂直の空きが違うことでした。 普通に使う分には、ほとんど分からないので問題ありません。 罫線で囲うなどを行うと、OSなどによってFontの垂直の値の違うが明確に出てしまうようです。 問題の表示を確認 Google Fontsで、Orbitronを利用したときにこんな感じになりました。
フォントサブスクリプションサービス「Morisawa Fonts」からWebフォントを2024年9月12日に提供開始 Webフォントとは フォントサブスクリプションサービス「Morisawa Fonts」からWebフォントを2024年9月12日に提供開始 モリサワは、フォントサブスクリプションサービス「Morisawa Fonts」において、新たにWebフォントを2024年9月12日（木）に提供開始することを発表した。 「Morisawa Fonts」でのWebフォントの提供開始により、共通のMorisawa IDでデスクトップフォントとWebフォントを購入・利用が可能となるプラットフォームへと進化。 今後、多様な媒体にまたがるデザインプロジェクトに、最適なサービスや機能を提供していく。 提供開始予定のWebフォントは、特定のフォントのスタイルを事前に登録して、必要なフォントファイルのみを
今回は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/563dad5461ab6bf79ec33452512e097949449247/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCc2VvJTVEJTIwd2ViJTIwZm9udCVFMyU4MiU5MiVFNiU5QyU4MCVFOSU4MSVBOSVFNSU4QyU5NiVFMyU4MSU5NyVFMyU4MSVBNjEwMCVFNyU4MiVCOSVFNSU4RiU5NiVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzQ3ODgyOTg1YzY2YzhkY2UzZTFhN2M0MGM3ZTVkN2I%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB3d3d5JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hZWY4MDIzZDc4NzAxODI1YmRhNGEyN2M3OGU5ZjA2Zg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De8513c9fca7102ed96e660256181e942)
先に結論 スクリプトの読み込み部分に 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 を使用する場合は、ペー
この記事は「クソアプリ Advent Calendar 2023 その２」の１１日目の記事です。 作ったもの 上様に何か納品したときにお使いください 領収書（覚書）をPDFでダウンロードできます ※注意事項 金額はランダムです 日付は空です モチベーション PDFで書類を生成するシステムってよくあると思うのですが、地味に大変ですよね。 各言語で各種便利なPDF操作ライブラリがあって、それにデータを埋め込みつつ書類を作って、いざ書き出してみたら盛大にずれてたとか、デプロイした環境に日本語フォントがないだとか。 なんかもっと簡単にできないかなと思ってたのですが、HTMLで書類を作ってブラウザで印刷プレビューして、その内容がそのままPDFになればいろいろ楽なのではないかと思いました。 書類のHTMLのURLさえあれば、そのURLをヘッドレスChromeあたりが見に行ってくれてPDF保存してくれる
Morisawa Fonts
Morisawa Fontsは、高品質でバラエティ豊かな2,000書体以上のフォントを提供する、モリサワの新しいサブスクリプションサービスです。
FONTPLUS 導入環境で Content-Security-Policy (CSP) を導入するには | ななみんのメモ帳
※下記の内容は、記事執筆時点での内容です。現在は異なっている場合がありますので、ご了承下さい。 この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
10年間ちょっとずつ作ってた書体の話｜Koji Kimura
トラヤヌスの碑文ローマン体の歴史は古く、紀元前の古代ローマ時代にはすでに現在の形状とほぼ変わらない大文字のアルファベットが存在していました（J, W, Uを除く）。トラヤヌスの碑文は、その時代の文字が現在も保存状態が良く残っており、かつ完成度が高いため、すべてのローマ大文字の淵源と言われています。 画像引用元： この記事にあるように、私も以前現地に行きましたが、文字が高い位置にあるのであまり近くで見ることができませんでしたが、新宿私塾の木村先生の原寸拓本採取までされる執念には本当に関心します。（新宿私塾は私も以前受講していました） ヴェネチアン・ローマン（1400年代）活版印刷が発明されたルネサンスの時代にイタリアのヴェネチアの印刷所で使われたローマン体です。「O, C, D, G」などの軸が斜めに傾いていて、「e」の横線は右肩上がりになっています。 オールド・ローマン（1400〜1500
Noto Sans Japaneseのバリアブルフォントを導入
昨日久しぶりにブログを更新すると、本文のフォントがなんとなくイマイチに感じました。先日の案件でもWebフォントを利用したので、もう少し知見を深めることも兼ねて「Noto Sans Japanese」を当サイトに導入してみました。 昨日はlink要素でfonts.googleapis.comを指定する方法で導入したのですが、最近リニューアルしたミツエーリンクスのコーポレートサイトを見ていると「Noto Sans Japanese」をセルフホスティングして配信されているので、僕も試してみたくなりました。配信までの作業過程を簡単に記録しておこうと思います。 サブセット化とWOFF2化 「Webフォントを軽量化する！サブセット化とセルフホスティング |東京のWeb制作会社｜株式会社ENVY DESIGN」を参考にしました。 まずは「Noto Sans Japanese」のバリアブルフォントをダウン
ディレクターさん、デザイナーさんから指定されたフォントを埋め込みしたけど反映されない、、、 そんなエラーに悩まされたこと、ありませんか？ この記事では、よくあるエラーを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）の原因となる望ましくないレイアウト シフトが発生する可能性があります。 ウェブフォントを最適化する前に、ブラウザによってウェ
Webフォントをサブセット化してセルフホスティングする際の注意点 フォントをサブセット化してセルフホスティングする事はフォントデータの改変・再配布になる可能性があるので、使用したいフォントのライセンスを確認してください。 今回はSILオープンフォントライセンスで利用・改変・再配布OKのGoogle fontsのNoto Sans Japaneseを使用します。 Google fontsのサイトから直接フォントデータをダウンロードしてサブセット化する事もできますが、フォントの見た目が少し変わってしまう場合があるので、フォントの見た目が変わらない方法でご紹介します。 ①フォントのダウンロード まずは「google-webfonts-helper」サイトから必要なフォントを検索してファイルをダウンロードします。 https://gwfh.mranftl.com/fonts 「1. Select
この記事は 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
よく知られていることとして、Google Fontsでは、読み込みのパフォーマンスを向上させるために、フォントファイルを120個程度のサブセットに分割して、使われているコードポイントのファイルだけがダウンロードされる仕組みになっています。なので素直にGoogleのCDNからフォントを利用するぶんには、何も意識しなくてもCSSファイルを読み込むだけで勝手に最適化してくれるわけですが、フォントを自前でホスティングしたいときはどうしようかなという話になります。例えばNotoSansJPのフォントファイル（.ttl）をそのままダウンロードすると、5.7MBあります。ボールドフォントもとなると、単純にその倍のサイズのフォントが必要になります。Google FontsのCDNからスライスされたファイルをごそっとダウンロードすればいいかもしれませんが、やはり自前でスライスしてホスティングできるのに越した
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ページを開く
ウェブサイトでローカルフォントの「游ゴシック」はもう使えない｜Takehiko Ono
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
ねこに合うフォントを知っていますか？｜株式会社イワタ ＊ フォントメーカー＊
OSやブラウザで違うFontのVertical Metricsの悩み | ツクメモ - ウェブやアプリをツクるヒトのメモ
Morisawa FontsからWebフォントを2024年9月12日に提供開始 - mojiru【もじをもじる】
[seo] web fontを最適化して100点取る - Qiita
Astro で FONTPLUS の Web フォントを読み込む
【クソアプリ】江戸時代もDX！?上様への納品物の領収証をPDFで発行してもらえるサービス - Qiita
Google・Adobeフォントが反映されない？ 正しい埋め込み方解説！ | masakichi-code
ウェブフォントを最適化する | web.dev
Webフォントを軽量化する！サブセット化とセルフホスティング |東京のWeb制作会社｜株式会社ENVY DESIGN
Vuetify3 でツールバーの左側にハンバーガーメニューアイコンを表示する - プログラムを書こう！
日本語のGoogle Fontsを自分でいい感じに分割してセルフホストする
フォントに関するおすすめの方法 | Articles | web.dev