:X眼查web字体研究-PPT资讯免费ppt模版下载-道格办公

X眼查web字体研究

om/fonts 3. Figma设计工具 步骤: 1. 打开第一个链接:http://fontstore.baidu.com/static/editor/index.html 2. 在该网页上,你可以选择已有的字体进行编辑,或者上传自定义字体。 3. 选择一个已有的字体进行编辑,然后点击"编辑"按钮。 4. 在编辑界面,你可以调整字体的大小、颜色、字距等属性,也可以添加特效或样式。 5. 点击"保存"按钮,将编辑后的字体保存到本地。 6. 打开第二个链接:http://ai.baidu.com/fonts 7. 在该网页上,你可以搜索并下载各种不同类型的字体,选择一个你喜欢的字体进行下载。 8. 将下载的字体文件保存到本地。 9. 打开Figma设计工具,创建一个新的项目或打开一个已有的项目。 10. 在Figma中,选择文本工具,并设置字体为你保存的编辑后的字体或下载的字体。 11. 使用文本工具添加文本框,并输入你想要展示的文字。 12. 调整文本框的样式和布局,可以进行对齐、缩放、调整行距等操作。 13. 完成后,保存并导出你的设计。 这样,你就完成了使用X眼查、百度字体库和Figma进行web字体研究的流程。

用到的工具

1.http://fontstore.baidu.com/static/editor/index.html

2.http://ai.baidu.com/docs#/OCR-API/9ef46660


第一步,分析字体
分析公司:小米科技 https://www.tianyancha.com/company/23402373

是不是点击后提示登录?Refer改为https://www.baidu.com即可,或者百度搜索 '天眼查 小米科技工商'这样就不用登陆了。

用两三个代理去访问,拿到https://static.tianyancha.com/fonts-styles/css/e4/e4d5343a/font.css这个css链接,e4/e4d5343a拼接为https://static.tianyancha.com/fonts-styles/fonts/e4/e4d5343a/tyc-num.woff,下载下来,记住html页面也下载下来。

其中的e4/e4d5343a我称作为版本号,不同ip拿到的版本号不同,字体映射也不同。一天有几百个映射吧。不知道怎么拿字体链接的话,F12,定位元素在经营范围这一数据项。一般class='tyc-num lh24'的都是有字体映射的。如下图


然后将woff文件用百度字体工具打开,选几个字记住它的字体轨迹(属性d就是,当然了,你直接拼接链接为https://static.tianyancha.com/fonts-styles/fonts/e4/e4d5343a/tyc-num.svg能看到)
这里可以看到7对应的映射是M544 696 l-297 -725 l-99 0 l282 674 l-379 0 l0 85 l493 0 l0 -34 Z,当然了这是去除过小数点的,直接看svg文件即可。聪明的人就知道我要干啥了,是的,当确定字体轨迹不变的话,就可以将轨迹存在库里一份,做映射。

当我拿到多套字体的时候,我比对小米公司的经营范围信息进行多次比对,每一套ttf文件用百度字体工具查看 '技术开发'这四个字分别对应的映射发现是固定不变的。

那么我就要思考怎么根据不同的ttf文件拿到真实字体的轨迹。下面是我个人的骚操作。
第二步,编码思路

字体文件都下载下来了,另外转一份svg文件(不想转的话,之前下ttf文件的时候就该保存一份svg文件)用Java或者python读取svg文件,遍历取值,拿到d值,然后载入ttf文件,传入d值,绘画出真的字体,保存本地,调用百度ocr接口,识别一下,得到真的字体名称。然后存入库中,就会得到字体--》字体轨迹这样一个对应关系。

这里存放了轨迹的md5值,为了方便检索。假如人家字体有倾斜,这办法就行不通了,不过呢,你可以将ttf文件放入百度字体工具里面,F12后选择一个字修改一下其中的值,修改一丢丢没问题,大的话字体就坏了。所以呢就算有字体倾斜,你也可以设置一个上下浮动的阈值,做字体轨迹识别!
小伙伴们可以看一下,820个字来回的映射生成字体文件给用户,也不多。这时候可以作为一个微服务存在。传入假的字体列表和字体url,假如有新的字体轨迹不存在库里,就下载一份字体文件。起个调度器每两个小时看是否有新的字体,有的话就按照之前的步骤解析,识别,入库即可。识别效果可以看另一篇文章。


知道小伙伴们犹豫啥问题,java和python怎么利用字体文件写字体呢?看下图。py版本和java版本

因为在svg或者woff中就算是假的字体,他也一定参与了映射。这个过程是一个闭环,不然就会出现一个字体对应两个轨迹的情况。这里传入的字是假的字体,那么用这个ttf文件中画出来的就是真的字体,这样就得到了轨迹--》真的字体的关系。
画张图吧,我语言表达能力不咋地。

文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/fr/articles/detail/X%20Eye%20Check%20web%20font%20research.html

(810)
打赏 支付宝扫一扫 支付宝扫一扫
single-end

相关推荐