[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

タグ

performanceとfontに関するginpeiのブックマーク (3)

  • 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 両

    Puppeteer で静的サイトの Font Subsetting | blog.jxck.io
    ginpei
    ginpei 2020/09/10
    PuppeteerでtextContentの文字を取得。要素名(h1等)で太字を識別し標準のものと分ける。確認としてChrome DevTools Protocolを用い、Computed StylesのRendered Fonts相当の値?を検証。
  • FONTastic Performance (or Number One Problem with FONTS)

    Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk about ways to avoid this, and what new platform features are here to help us deliver pr

    FONTastic Performance (or Number One Problem with FONTS)
    ginpei
    ginpei 2018/01/04
    ウェブフォント読み込み前に真っ白になるFOIT、読み込み後に再描画してガクッとなるFOUTについて。次善の策としてサイズの近いフォールバックフォントを使い影響を最小限に。
  • Font style matcher

    If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This too

    ginpei
    ginpei 2017/12/22
    ウェブフォント読み込み前後でガクッとするやつ (FOUT) を改善するフォールバック作成補助ツール。両者重ねた表示等で、目的のフォントに視覚的に近い指定を作れる。
  • 1