字体文件检查工具Webfont Generator

最新推荐文章于 2021-08-04 00:22:45 发布
最新推荐文章于 2021-08-04 00:22:45 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： CSS HTML 文章标签： Webfont Generator 字体文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinjm8888/article/details/83615098
版权
HTML 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
CSS
5 篇文章 0 订阅
订阅专栏

一、Webfont Generator

有时候我们下载的字体文件.ttf .svg .woff .eot可能是损坏的文件，这种情况往往我们正确使用了但是字体不显示。

这种情况我们可以借助Webfont Generator工具来检查一下字体文件。

二、使用

打开网站https://www.fontsquirrel.com/tools/webfont-generator

提交字体文件如果正常显示文件类型和大小表明文件正常。

 

Bonrui
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2020年 Top 6+ 最佳免费字体网站
小青蛙的博客
05-27 1314
2020年 Top 6+ 最佳免费字体网站 您需要您的网站或应用程序看起来令人惊叹，而排版是设计中不可忽视的关键因素。那么，到2020年，您在哪里可以找到符合高质量标准的免费字体？
为更快的页面提供WOFF2字体
cungui5726的博客
08-22 959
WOFF revolutionized web typography, cutting through competing and incompatible formats to create a single, universal webfont standard accepted equally by browser vendors, device manufacturers and font...
html设置字体为小型大写字母,css3 – OpenType小型大写的CSS回退
weixin_39617252的博客
05-31 361
上次更新时间2016/02/28.我花了相当多的时间研究这个并与之搏斗.在尽可能地挖掘之后,现在的顶级解决方案是：@supports利用浏览器中的@supports规则.这是我最初的选择在这个项目上做.[1]您以这种方式使用规则：.some-class {font-variant: small-caps;}@supports(font-feature-settings: 'smcp') {.som...
wordpress 自定义_如何在WordPress中添加自定义字体
09-17 1238
wordpress自定义Do you want to add custom fonts in WordPress? Custom fonts allow you to use beautiful combination of different fonts on your website to improve typography and user experience. 是否要在WordPr...
vc++6.0更改字体_2020年6+最佳免费字体网站
culi3182的博客
09-03 884
vc++6.0更改字体You need your website or application to look amazing, and typography is a key factor in design that can’t be overlooked. So where can you find free fonts online in 2020 that uphold a high s...
soup ui使用指南_指南：具有Web字体的更好，更清晰的UI图标
cune1359的博客
07-02 415
如果您熟悉使用位图图像格式（如PNG和GIF）在网站上显示图标，那么您也将熟悉其缺点。 首先，根据图标的尺寸和颜色信息的多少，图标文件的大小可能会非常大。 如果我们要在网站中放置太多图标，则由于浏览器必须执行许多HTTP请求 ，这也有可能减慢网站性能 。 尽管可以使用CSS Sprite解决此问题，但文件大小仍然很大。 位图图标在灵活性和可伸缩性方面也有缺点。 假设我们需要将图标放大或...
如何对纯css和js优化,提高前端性能的一个案例
weixin_42268494的博客
08-04 145
在De Voorhoede,我们尽所能地为客户推进前端性能。虽然不是很容易就能说服客户完全按照我们的指令去做，但我们一直在尽全力和他们沟通，解释提高性能的重要性，或者将他们的性能与他们主要竞争对手进行比较。最近更新了我们的网站，除了设计上进行了大修，这也是一个将性能提高到最优的理想机会。我们的目标是有效控制，注重性能，与未来技术兼容，并将创建网站变为了一件有趣的事。以下是我们如何改进网站的具体做法...
【译】前端性能优化清单
weixin_34228617的博客
09-17 142
本文翻译自thedaviddias总结的Front-End-Performance-Checklist HTML 压缩HTML: 生产环境上的HTML代码应该是压缩的，注释、空格、新行需要被移除。 原因： 移除不必要的空格、注释和新行可以减少html的文件大小并且加快你的网站加载时间，减少了用户的下载流量。 做法： 大多数开发框架都有压缩网页的插件。你可以使用一系列的NPM模块来自动为你...
web性能优化——优化内容
weixin_33796177的博客
08-06 177
与桌面应用不同，网络应用不需要单独的安装过程：只需输入网址，便可启动和运行 - 这是网络的一个关键特色。不过，要做到这一步，我们通常需要获取几十个（有时甚至是几百个）不同的资源，所有这些资源加起来的数据量高达几兆字节，并且必须在短短几百毫秒内汇聚起来，以实现我们想要达到的即时网络体验。 在满足上述要求的前提下实现即时网络体验绝非易事，优化...
webfont-generator-cli：易于使用的，预先配置的cli工具，用于从一堆.svg文件中生成webfont图标套件
02-04
Webfont Generator CLI 易于使用的，预先配置的cli工具，可从一堆.svg文件生成webfont图标套件介绍从此cli实用程序使从命令行创建webfont图标集非常简单-它包装并预先配置了 ，但允许进行一定程度的自定义。...
开发工具 fontawesome-webfont.ttf
05-31
开发工具 fontawesome-webfont.ttf开发工具 fontawesome-webfont.ttf开发工具 fontawesome-webfont.ttf开发工具 fontawesome-webfont.ttf开发工具 fontawesome-webfont.ttf开发工具 fontawesome-webfont.ttf开发工具...
开发工具 fontawesome-webfont.eot
05-31
开发工具 fontawesome-webfont.eot开发工具 fontawesome-webfont.eot开发工具 fontawesome-webfont.eot开发工具 fontawesome-webfont.eot开发工具 fontawesome-webfont.eot开发工具 fontawesome-webfont.eot开发工具...
开发工具 fontawesome-webfont.svg
05-31
开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具...
开发工具 fontawesome-webfont.woff
05-31
开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff...
HTML input placeholder的样式设置
热门推荐
Bonrui编程路
01-12 1万+
placeholder 兼容写法： ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pi
H5 手机页面字体显示大小与css设置不一致，viewport影响font-size问题
Bonrui编程路
01-12 9018
css设置字体大小后在手机端查看字体偏大。经过排查排除css优先级和js的问题。 经过分析可能是浏览器的功能，经过搜索发现确实如此。 这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，是 Webkit 给移动端浏览器提供的一个特性：这个特性是为用户因页面内容多而缩放页面导致字体变小看不清楚而设计的。目的是为了让用户缩放页面后保
css 常用操作
Bonrui编程路
01-12 4792
transform限制position:fixed的跟随效果 元素设置position:fixed后大家都知道可以让元素不跟随滚动条滚动， 但是transform可以把position:fixed干掉让其降级成absolute。 如下面代码： 本身应该不动的图片因为父级设置了transform而变成了absolute的效果。 更多transform影响css的介绍请参考：
Vue配置scss/less，webstorm识别scss/less
Bonrui编程路
01-16 1435
vue配置sass 1：安装npm install node-sass --save-dev npm install sass-loader --save-dev2：配置webpack vue1.0配置webpack中module的loaders为： { test: /\.vue$/, loader: 'vue-loader', options: { lo
css中字体文件怎么配置
最新发布
04-29
在CSS中使用字体文件需要通过`@font-face`规则来定义字体，然后将其应用到相应的元素中。 以下是一个示例： ```css @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } body { font-family: 'MyWebFont', Fallback, sans-serif; } ``` 在上面的示例中，`@font-face`规则定义了名为"MyWebFont"的字体，并指定了各种格式的字体文件的URL。然后，在`body`元素中，将字体应用于整个文档，并提供一个回退字体（Fallback）以防字体文件无法加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值