天道酬勤,学无止境

woff2

Chrome 中的字体渲染 (woff2) - 加载字体系列后不想更改(Font rendering in Chrome (woff2) - after load font family doesn't want to change)

问题 为了防止与字体加载时间相关的字体渲染延迟,我编写了一些简单的脚本,这些脚本加载包含@font-face和自定义字体的 CSS 会有一些延迟。 由于该解决方案,默认情况下使用系统字体(没有延迟),后来它们被新的 CSS 用新字体覆盖。 但是,该解决方案适用于除 Chrome 之外的任何地方。 在 chrome 网络选项卡中,我可以看到字体已加载,但不知何故它们没有重新渲染。 它在 IE 和 Firefox 中的外观(所需字体): 和 Chrome(系统字体): HTML: <link data-href="/assets/v2/default/css/font-loader.css" rel="stylesheet" type="text/css" data-mobile="true"/> 默认 CSS: body{ font-family: sans-serif; } .price{ text-align: right; font-size: 22px; font-family: sans-serif; letter-spacing: 0.01em; } 加载的 CSS: @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local

2021-09-18 21:24:21    分类:技术分享    css   google-chrome   fonts   font-face   woff2

Font rendering in Chrome (woff2) - after load font family doesn't want to change

To prevent font rendering lags related to font loading time I wrote some simple script which load CSS containing @font-face and custom fonts with some delay. Thanks to that solution, by default system fonts are used (no lag) and later they are overwrite by new CSS with new fonts. However, solution works everywhere except Chrome. In chrome network tab I can see that fonts were loaded but somehow they were not re-rendered. How it looks in IE, and Firefox (desired fonts): And Chrome (system fonts): HTML: <link data-href="/assets/v2/default/css/font-loader.css" rel="stylesheet" type="text/css"

2021-09-04 08:02:07    分类:问答    css   google-chrome   fonts   font-face   woff2

CORS Issue with woff2 fonts behind CDN in Chrome

I have an S3 Bucket fronted with a Cloudfront CDN. In that bucket, I have some woff2 fonts that were automatically tagged with the content type octet-stream. When trying to load that font from a CSS file on a live production website, I get the following error: Access to Font at 'https://cdn.example.com/fonts/my-font.woff2' from origin 'https://www.live-website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.live-website.com' is therefore not allowed access. The thing is that a curl reveals that the Access

2021-06-09 14:16:15    分类:问答    google-chrome   amazon-s3   cors   amazon-cloudfront   woff2

在字体声明中仍然需要eot,ttf和svg吗?(Are eot, ttf, and svg still necessary in the font-face declaration?)

问题 到目前为止,我一直使用Paul Irish的防弹字体外观语法 但是我只是在看caniuse对.woff和.woff2文件的支持,它说IE9 +支持woff。 关于该主题的大多数文章都来自2009年左右,而在撰写本文时已经整整7年了。 当woff现在得到如此广泛的支持时,我们真的需要继续声明ttf,otf,eot和svg吗? 回答1 2018年10月 tl; dr:使用WOFF2,每个现代的浏览器都支持WOFF2,因为IE11不会死,所以WOFF会回退;没有local()是因为您希望每个人都使用相同的字体,而不是“使用不同的版本甚至是完全不同的字体”碰巧使用了相同的名称”。 结束。 2016年原始答案 简短的回答:不。 EOT是唯一相关的IE8及以下(虽然琐事:一路下跌到IE4 IE实际上开创了网络字体)和SVG字体作为技术(不要混淆OpenType字体与SVG轮廓)放弃(2015年初)因为一旦真正的webfonts开始可用,局限性就会发疯。 截至2016年,您只需要WOFF。 还有WOFF2,如果您想利用WOFF的更新更好的版本,该版本才刚刚成为w3的推荐(在回答此问题时)。 为了使事情变得更容易,自2016年1月12日起,Microsoft停止了对IE8及更低版本的支持,而对IE9的支持有限:它们现在仅支持每个仍受支持的OS的最新可用浏览器,这意味着Windows

2021-06-01 18:39:12    分类:技术分享    css   fonts   font-face   woff   woff2

Font Face在IIS 8.0中不起作用(Font Face isn't working in IIS 8.0)

问题 我从Font Squirrel生成的程序中有一个字体,但我无法使它在IIS中工作,它在localhost中工作。 我在我的MIME类型中添加了application / font-woff文章,但它仍然不起作用。 Context --Fonts ----font location --css files 的CSS @font-face { font-family: 'wallStreetFont'; src: url('Fonts/subway-webfont.eot'); src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'), url('Fonts/subway-webfont.woff2') format('woff2'), url('Fonts/subway-webfont.woff') format('woff'), url('Fonts/subway-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } 编辑当前的MIME 我正在使用默认的IIS 8 MIME字体/ x-woff 回答1 很高兴看到WOFF2被包含在Font Squirrel字体中! 尽管IIS

2021-05-31 17:54:57    分类:技术分享    css   iis   fonts   woff2

Font Face isn't working in IIS 8.0

I have a font-face in my program generated from Font Squirrel I just can't get it to work in IIS, it works in localhost. I added application/font-woff article to my MIME Types but it still doesn't want to work. Context --Fonts ----font location --css files CSS @font-face { font-family: 'wallStreetFont'; src: url('Fonts/subway-webfont.eot'); src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'), url('Fonts/subway-webfont.woff2') format('woff2'), url('Fonts/subway-webfont.woff') format('woff'), url('Fonts/subway-webfont.ttf') format('truetype'); font-weight: normal; font-style

2021-04-22 06:24:29    分类:问答    css   iis   fonts   woff2

.woff2字体的正确MIME类型(Proper MIME type for .woff2 fonts)

问题 今天,我将Font Awesome软件包更新为4.3.0,并注意到添加了woff2字体。 该文件是在CSS中链接的,因此我需要配置nginx才能正确提供woff2文件。 目前,我在nginx config中有用于字体的此块: location ~* \.(otf|eot|woff|ttf)$ { types {font/opentype otf;} types {application/vnd.ms-fontobject eot;} types {font/truetype ttf;} types {application/font-woff woff;} } woff2字体正确的mime类型是什么? 回答1 在IIS中,可以通过将以下内容添加到项目的web.config中来声明WOFF2字体文件的mime类型: <system.webServer> <staticContent> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff2" mimeType="font/woff2" /> </staticContent> </system.webServer> 更新:根据最新的W3C编辑器的Draft WOFF2规范,mime类型可能正在更改。 请参阅附录A:“ Internet媒体类型注册”第6.5节

2021-04-10 11:28:17    分类:技术分享    fonts   mime-types   woff   woff2

Proper MIME type for .woff2 fonts

Today I updated Font Awesome package to 4.3.0 and noticed that woff2 font was added. That file is linked in CSS so I need to configure nginx to serve woff2 files properly. Currently I have this block in nginx config for fonts: location ~* \.(otf|eot|woff|ttf)$ { types {font/opentype otf;} types {application/vnd.ms-fontobject eot;} types {font/truetype ttf;} types {application/font-woff woff;} } What is proper mime type for woff2 fonts?

2021-03-25 21:46:25    分类:问答    fonts   mime-types   woff   woff2

Are eot, ttf, and svg still necessary in the font-face declaration?

Up until now, I've used Paul Irish's bulletproof font-face syntax But I was just looking at support for .woff and .woff2 files on caniuse and it says woff is supported in IE9+. Most articles on this topic are from around 2009, which at the time of this writing was a full 7 years ago. Do we really need to keep declaring ttf, otf, eot, and svg when woff now enjoys such wide support?

2021-03-21 23:27:43    分类:问答    css   fonts   font-face   woff   woff2