Braveはフォントを取得できないようにした。いっぽうChromeはフォントを根刮ぎ取得しようとしている。 - Qiita
Braveはフォントを取得できないようにした。いっぽうChromeはフォントを根刮ぎ取得しようとしている。ChromeGoogleSecuritybraveブラウザフィンガープリント JavaScriptから、現在表示されているフォントを取得することが可能です。 仕組みを簡単に説明すると、フォントによって文字の横幅は異なるので、font-familyを変えてみてwidthが変わったらそのフォントがインストールされている、みたいな識別方法です。 つまり、フォントを表示させて、そのフォントが入っているかどうかをチェックすることで、ブラウザフィンガープリントになります。 Braveはフォントを取得できないようにした How Brave defends against font fingerprintingの記事において、Braveはフォントによるフィンガープリント防止について解説しています。 H
フォント選びのノウハウを教える 「Google Fonts Knowledge」がリリース | Webマガジン「AXIS」 | デザインのWebメディア
Googleは、Google Fontsチームが世界のタイポグラフィの専門家と共同で手がけた、フォント選びのためのライブラリーサービス「Google Fonts Knowledge」をリリースした。 Google Fontsは、CSSとAndroidを通じて1,300を超えるフォントファミリーを無料で提供するサービス。今回追加されたGoogle Fonts Knowledgeは、あらゆるメディアのタイポグラフィの普遍的な原理をカバーしており、デザイナーと開発者がスキルや目的に合わせてフォントの選択・使用ができるようにわかりやすく教えてくれるという。 コンテンツとしては、3つのカテゴリーを通じて30以上のレッスンを紹介。たとえば、タイポグラフィのイロハを教えてくれる「書体入門」は、誰でも知識とスキルを身に付けることができる入門書となっている。 「書体の選択」では、ユーザーの好みのフォントを見
CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選 | BUILD Journal
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン HTML<div class="button01"> <a href="">ボタンデザイン</a> </div> CSS.button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; bac
フォントワークスがGitHubで無料公開しているフォントをPhotoshopなどで使ってみよう
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というWebサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事では、フォントワークスがGitHubで配布している無償フォントをPhotoshopやIllustratorで使用する方法について解説します。 フォントワークスがGitHubで公開しているフォントは「SILオープンフォントライセンス」のため、無償で個人利用はもちろん、商用利用も可能です。 SILオープンフォントライセンスについて、詳しくは以下のページに書かれています。使用前に確認しま
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗
だれかWebのチョットワカル人、 「(日本語など大容量の)Web FontのCore Web Vitalsへの影響 使い続ける方法とその是非」 を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vitals影響するのか、影響を回避しながらWebフォントを使う方法がハッキリ分かっていなかったので、調査してみました。 本投稿はWEB上から入手できる情報源をもとに内容をまとめています。情報の正確性には留意していますが、私の独自の解釈・予想も含まれています。以上から、本情報はいち見解として捉えていただきますようお願い致します。WebフォントによるCore Web Vitalsへの影響とはCore Web
CSSのテキストマスクで映えるメインビジュアルを実現
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 メインビジュアルがマンネリ化していませんか 「メインビジュアルの見せ方がワンパターン化してきた」「CSSでちょっと凝った感じに見えるメインビジュアルを作ることができれば」など、シンプルなのにいつもより少し見栄えのするCSSで実現できるメインビジュアルを紹介します。 CSSのテキストマスクを使ってみる CSSのbackground-clipを使用すると、背景画像をテキストの形で切り抜いたように表示
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
各種ファイルをブラウザでPDF化 Adobeが新機能、Googleと連携
Webブラウザ内のフォームにWordや画像ファイルをドラッグ＆ドロップするだけで、PDFに変換するサービスの提供を、米Adobeがこのほど、Googleと連携して始めた。無料ユーザーは1日1ファイルまで利用でき、それ以上使いたい場合は有料登録が必要。 Word、Excel、PowerPointなどのOfficeファイルと、JPG、PNG、TIFFなどの画像ファイルをドラッグ＆ドロップでPDF化でき、ダウンロードしたり、クラウド上に保存したりできる。 米国（英語版）で「.new」として提供しているサービスの日本版。英語版なら、Webブラウザに「PDF.new」と入力するだけで使用できる。また、「Sign.new」と入力すれば、記入したり送信したりできるPDFフォームを作れる。「JPGtoPDF.new」ならJPGからPDFに変換でき、「CompressPDF.new」ならファイルのサイズを縮
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
Nuxt.js製のWebサービスにmarked+highlightjsでMarkdownで書いた読書メモを表示できるようにしてみた - Qiita
Nuxt.js製のWebサービスにmarked+highlightjsでMarkdownで書いた読書メモを表示できるようにしてみたCSSJavaScriptMarkdownVue.jsNuxt 先日、開発中の積読用の書籍管理アプリの新機能として、 Markdownで書ける読書メモを追加したので、その時の備忘録。 ✅読書中のメモが残せる読書メモ機能✨ 読書メモを残せる機能を追加しました‼️ マークダウンで書けて、全メモをクリップボードにコピーできちゃいます😊 はてなブログなどマークダウンが使えるなら、コピペで記事も書くことも😍 (続く pic.twitter.com/K3pjr4noVo — めもらば@公式 (@MemoryLoverz) September 1, 2019 全体の流れ やりかたとしては、こんな感じ 1. Markdownの文字列をmarkedを使ってHTML化 2. <
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.1.1/dist
無料の日本語Webフォント！遂にGoogle Fontsで日本語フォント８種が正式に利用可能に | アート - Japaaan #フォント
様々なスタイルのフォントをウェブサイトに使用できるGoogle Fonts。これまでGoogle Fontsでは英語フォントが充実しており、日本語に対応したフォントは「Noto Sans Ja… 遂にGoogle Fontsで日本語フォントの提供が正式にスタートしました。 日本語フォントには漢字が含まれるため欧文フォントよりもデータ量が多く、ウェブフォントとして日本語フォントを利用する場合には、ファイルサイズの大きいフォントデータをダウンロードする必要がありましたが、フォントデータを分割することで、実用レベルでの利用が可能になったそう。 現在Google Fontsで利用できる日本語フォントは８種類。試験的に公開されていたフォントとは若干の変更があります。 Noto Sans JP M PLUS 1p Sawarabi Mincho Sawarabi Gothic Noto Serif J
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語プログラミングフォント「PlemolJP」v1.0.0が公開／全角空白を可視化するなどの工夫を凝らす
Icons - Material Design
Google Fonts正式版に日本語がやってきた！ | バシャログ。
cmmntr.com