Programming Fonts - Test Drive
Size / ↑ ↓ Theme Language // Type some code -> console.log "oO08 iIlL1 g9qCGQ ~-+=>"; function updateGutters(cm) { var gutters = cm.display.gutters, __specs = cm.options.gutters; removeChildren(gutters); for (var i = 0; i < specs.length; ++i) { var gutterClass = __specs[i]; var gElt = gutters.appendChild( elt( "div", null, "CodeMirror-gutter " + gutterClass ) ); if (gutterClass == "CodeMirror-line
[CSS]Web制作者ãŒçŸ¥ã£ã¦ãŠããŸã„ã€Webフォントを快é©ã«è¡¨ç¤ºã™ã‚‹CSSã®æ–°ã—ã„プãƒãƒ‘ティ「font-displayã€
Webフォントを使用ã—ã¦ã„るサイトやブãƒã‚°ãŒå¢—ãˆã¦ãã¾ã—ãŸã€‚ãã—ã¦ã€è¿‘日アップデートã•ã‚Œã‚‹Chrome 60ã§ã¯ã€Webフォントã®ä½¿ã„å‹æ‰‹ã‚’å‘上ã™ã‚‹ã€Œfont-displayã€ãƒ—ãƒãƒ‘ティãŒã„よã„よæ£å¼ã«å®Ÿè£…ã•ã‚Œã‚‹äºˆå®šã§ã™ï¼ˆå‚考: Chromium）。 追記: ã•ãã»ã©Chrome 60ãŒãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã¾ã—ãŸã€‚ Webフォントをé©ç”¨ã—ãŸãƒ†ã‚ストãŒèªã¿è¾¼ã¿æ™‚ã«ä¸€çž¬è¡¨ç¤ºã•ã‚Œãªã„ç¾è±¡ãŒã‚ã‚Šã€ä»Šã¾ã§ã¯JavaScriptã§å¯¾å¿œã—ã¦ã„ãŸäººã€ä»•æ§˜ã ã¨ã‚ãらã‚ã¦ã„ãŸäººã¯ã€ã“ã®font-displayã‚’ç©æ¥µçš„ã«å–り入れるã¹ãã ã¨æ€ã„ã¾ã™ã€‚ font-display for the Masses 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ブラウザã§ãƒ•ã‚©ãƒ³ãƒˆãŒèªã¿è¾¼ã¾ã‚Œã‚‹ä»•çµ„ã¿ font-displayプãƒãƒ‘ティã¨ã¯ ã»ã¨ã‚“ã©ã®å ´åˆã€swapを使
![[CSS]Web制作者ãŒçŸ¥ã£ã¦ãŠããŸã„ã€Webフォントを快é©ã«è¡¨ç¤ºã™ã‚‹CSSã®æ–°ã—ã„プãƒãƒ‘ティ「font-displayã€](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
Font-display playground
This is a small explainer that I built for a talk on web fonts and performance. Before we talk about what font-display is, let's talk about the lifetime of a web font. For a super detailed explanation of where web fonts fit in the browser rendering process, Ilya Grigorik has an amazing blog post on web font optimization. But, if we're just trying to understand the basics, there are basically three
Mavericksã§Emacsã®ãƒ•ã‚©ãƒ³ãƒˆãŒå¯æ„›ããªã‚‹å•é¡Œã‚’解決ã™ã‚‹ - minus9d's diary
Mac OS ã‚’ Mavericks ã«ã‚¢ãƒƒãƒ—グレードã—ãŸã¨ã“ã‚ã€Emacsã®æ—¥æœ¬èªžãƒ•ã‚©ãƒ³ãƒˆãŒãªãœã‹å¯æ„›ã™ãŽã‚‹ã‚‚ã®ã«ãªã£ã¦ã—ã¾ã£ãŸã€‚ SOTA » Emacsã®è¨å®š (フォント) を真似ã—ã¦ã€æ—¥æœ¬èªžãƒ•ã‚©ãƒ³ãƒˆã‚’指定ã™ã‚‹ã‚³ãƒ¼ãƒ‰ã‚’~/.emacs.d/init.elã«è¨˜è¿°ã—ãŸã€‚フォントã¯æ˜Žæœã‹ã‚‰ã‚´ã‚·ãƒƒã‚¯ã«å¤‰æ›´ã—ã¦ã„る。 ;; Mac用フォントè¨å®š ;; http://tcnksm.sakura.ne.jp/blog/2012/04/02/emacs/ ;; 英語 (set-face-attribute 'default nil :family "Menlo" ;; font :height 150) ;; font size ;; 日本語 (set-fontset-font nil 'japanese-jisx0208 ;; (font-spec :family "Hiragino Mincho
Windows 㧠Ricty を使用ã™ã‚‹æ‰‹é † - ã‘ã„れんç¾è±¡ã®å¹½çŽ„美よ
2013-11-23 Windows 㧠Ricty を使用ã™ã‚‹æ‰‹é † PC Ricty綺麗ã よã ç”»åƒã¯Windowsã§Ricty+MacTypeを実際ã«ä½¿ç”¨ã—ã¦SublimeTextã«è¡¨ç¤ºã—ãŸã‚‚ã®ã§ã™ã€‚ 変ãªç™–ã‚‚ãªãæ´—ç·´ã•ã‚ŒãŸä½‡ã¾ã„を醸ã—出ã—ã¦ã‚‹æ°—ãŒã—ã¾ã™ã€‚･･･言ã„éŽãŽã‹ ※日本語ã®è¡¨ç¤ºã‚‚å¯èƒ½ãªãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ãƒ•ã‚©ãƒ³ãƒˆã§ã™ã€‚Rictyã¯Inconsolataã¨Migu 1Mã‚’åˆæˆã—ã¦ä½œã‚‰ã‚Œã¾ã™ã€‚ ･･･ãŒã€åˆæˆã‚’自分ã§è¡Œã†å¿…è¦ãŒã‚ã‚‹ã®ã§ã€ãã®æ‰‹é †ã‚’残ã—ã¦ãŠãã¾ã™ã€‚･･･ã¨ã¦ã‚‚ç°¡å˜ã ã‘ã©â€»MacTypeã¯æ•°å¹´å‰ã‹ã‚‰ä½¿ã£ã¦ã„ãŸã®ã§ä»Šå›žã¯MacTypeã«ã¤ã„ã¦ã¯çœç•¥ã—ã¾ã™ã€‚ Rictyã®åˆæˆæ‰‹é †(Cygwinä¸è¦ãƒ‘ターン) å¿…è¦ãªææ–™4ã¤ã‚’ダウンãƒãƒ¼ãƒ‰ã™ã‚‹ã€‚ â‘ Ricty生æˆã‚¹ã‚¯ãƒªãƒ—ト URL: http://save.sys.t.u-tokyo.ac.jp/~yusa/fonts
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}