font-face相关内容

向屏幕阅读器隐藏图标的适当方式是什么

在我的Web应用程序中,我为自己设置了一个完全由图标组成的字体。我使用这些图标来补充应用程序中的标题和副标题,使其在视觉上更具吸引力。 但是,像JAWS这样的屏幕阅读器会读出这些内容,这会给屏幕阅读器的用户带来不愉快的体验。 例如,字符c显示云的图像。我以这种方式使用它来补充标题,例如 : c 现在我希望屏幕阅 ..
发布时间:2022-06-30 10:50:32 前端开发

如何在本地计算机上测试FONT-DISPLAY:SWAP?

为了克服不可见文本,PageSpeedInsights建议在@font-face声明中使用font-display: swap对整个应用程序使用后备字体。我已将该属性添加到我的Web应用程序的每个@font-face,但无法测试它,因为更改仍在我的本地计算机上。 那么,现在如何在我的本地计算机上测试font-display: swap并确保它正常工作,并可能捕获一些屏幕截图或具有支持它的文档 ..
发布时间:2022-04-19 14:35:54 前端开发

何时下载备用字体?

如果我将Google字体设置为备用字体,如下所示: @font-face { font-family: 'GoogleFont'; src: url('GoogleFont.ttf'); } html, body { font-family: 'myMainFont', 'GoogleFont'; } 如果主字体失败,Google字体是否仅下载到用户的浏览器? ..
发布时间:2022-04-19 14:33:45 前端开发

Safari用户安装的字体不会呈现

我使用的是MAC OSX,我的Safari版本是13.0.3。我试着在我的机器上安装了一些定制字体。我在我的机器上安装了https://www.fontsquirrel.com/fonts/list/popular中的Great-vibes字体(仅是一个例子),它现在显示在我的字体书中的用户字体部分。我使用的是.otf格式的字体。我现在尝试在我的Web应用程序上使用它,如下所示: @font ..
发布时间:2022-04-19 14:30:53 其他开发

使用数据 URI 的 Base64 编码 OpenType 字体

我想在 font-face 中添加一个 base64 编码 OpenType 字体作为数据 URI. 到目前为止我有这个: @font-face {字体系列:'测试';src:url(数据:字体/otf;base64,//这里是 Base64 字符串 ...) 格式('opentype');} 但我认为它没有将字体正确地包含在我的风格中. 对此的任何帮助将不胜感激. 解决方案 ..
发布时间:2022-01-21 08:50:07 前端开发

如何解决“缺少跨域资源共享 (CORS) 响应标头"网络字体问题?

由于某种原因,字体已停止在我的网站上呈现.字体存储在本地,与站点在同一台服务器上. 我查了一下问题,似乎是 Missing Cross-Origin Resource Sharing (CORS) Response Header 但我无法理解解决方案. 所有各种网站都说要使用:Access-Control-Allow-Origin:* 但由于我主要是前端,我不知道该放在哪里.我的 ..
发布时间:2022-01-15 19:24:17 其他开发

Amazon S3 CORS(跨域资源共享)和 Firefox 跨域字体加载

长期以来,Firefox 无法从与当前网页不同的来源加载字体,这是一个长期存在的问题.通常,在 CDN 上提供字体时会出现问题. 在其他问题中提出了各种解决方案: CSS @font-face 不支持 Firefox,但支持 Chrome 和 IE 随着 Amazon S3 CORS 的引入,是否有使用 CORS 来解决 Firefox 中字体加载问题的解决方案? 编辑:很 ..
发布时间:2022-01-15 19:04:25 前端开发

如何添加 Access-Control-Allow-Origin 标头

我正在设计一个网站(例如 mywebsite.com),该网站从另一个网站(例如 anothersite.com)加载字体字体.我在 Firefox 中加载字体时遇到问题,我阅读了 这个博客: Firefox(支持@font-face从 v3.5) 不允许跨域默认字体.这意味着字体必须从同一个域提供(和子域),除非您可以添加“访问控制允许来源"标题到字体. 如何将 Access-Con ..
发布时间:2022-01-11 15:55:06 其他开发

@font-face 在 Internet Explorer 移动版中不起作用

我一直在用响应式布局,并在我的笔记本电脑和 Galaxy S3 上测试了多个浏览器中的各种分辨率和分辨率. 鉴于我无法在 Google Play 上使用 Internet Explorer,我现在正在工作时在诺基亚 Lumia 800 上测试该网站.它似乎运行的是 Windows Phone 7.5,由于我找不到显示 IE 版本的按钮,而且智能手机很新,我怀疑它是 IE 9. @fon ..
发布时间:2021-12-30 12:18:27 其他开发

在检查器中哪里可以看到 chrome 加载的字体文件?

chrome 检查器中的哪个选项卡显示您通过 font-face 加载的字体文件?我在资源下找不到它.我遇到了一个问题,一组字体系列文件正在加载,但另一个字体系列没有.我已经检查了从直接转到 URL 并看到它们确实存在的所有内容,但我想查看检查器并看到它加载了一种字体系列而不是另一种.这可以用 chrome 实现吗? 解决方案 您可以使用“网络"选项卡查看下载的 Web 字体: ..
发布时间:2021-12-30 11:43:20 其他开发

通过删除字形缩小 .OTF 字体

我不太相信这个问题不是专门针对 OpenType 字体提出的,但有人知道从这些字体中删除字形的方法吗? 我有一个 .OTF 文件非常大(将近 10MB),我需要把它缩小.原因有两个. 1) 我正在尝试为 Web 嵌入做准备,因此文件越小,客户端就越容易. 2) Font Squirrel(用于轻松准备字体文件)有 2MB 的上传限制 - 我知道有其他替代方案,但到目前为止都没有成 ..
发布时间:2021-12-30 11:42:39 其他开发