首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    字体图标的绘制和使用技巧

    从事前端的朋友应该对“字体图标”这个词汇不陌生,为了适应越来越挑剔的屏幕,网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。...取而代之的是使用 css3 和 svg 来绘制,而对于网页小图标,我们更希望在整个系统的前端架构中将它们做成字体库统一管理。如下图: ?...我是主后端的程序员,很早以前就在项目中使用过字体图标,但是之前用于制作图标库的 svg 都是美工帮我画好,所以一直没有深究其中的原理,直到近期不得不自己制作才对其好好研究了一下。...这里先跟大家推荐两个管理字体图标库的工具网站: icomoon.io www.iconfont.cn/plus icomoon 大名鼎鼎,不过个人认为 iconfont 阿里巴巴的矢量图标库更符合国人的使用习惯...下面我从svg绘制和代码实现两方面将初次制作字体图标遇到的坎和大家分享一下,愿后来者不要入坑。

    1.4K100

    字体图标iconfont的使用

    1.将从阿里矢量图标库中图标并下载到本地 2.使用图标(三种使用方式) 1.使用 FontClass(最简单方式,支持字体样式定义但不支持多色字体) fontClass 支持字体的样式定义,但不支持多色字体...只需要 html 和 csss。 第一步:引入项目下面生成的 fontclass 代码: <link rel="stylesheet" href="....} 2.使用 Unicoded(兼容性最好,支持字体的样式定义但不支持多色字体) 支持字体的样式定义,但不支持多色字体,兼容性最好,支持 IE6+,及所有现代浏览器。...支持按字体的方式去动态调整图标大小,颜色等等。 第一步:拷贝项目下面生成的 @font-face 引入以下文件: 注意需要将对应的文件引入,和注意修改引入文件时的路径。...Symbol(兼容性最差,支持字体的样式定义且支持多色字体) 支持多色图标了,通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。

    4.2K20

    dotnet C# 使用 FreeType 读取和绘制字体

    本文将和大家介绍在 C# 里面简单使用 SharpFont 对 FreeType 的封装,读取 ttf 等字体文件信息,绘制出某个文字到图片文件 由于本文使用的 SharpFont 库已经很久没有维护了...,本文的例子里面使用的 .NET 框架就退回到 .NET Framework 4.7.2 版本。...@"C:\windows\fonts\simfang.ttf"); 接下来的代码将演示如何获取某个字符在字体里面的信息,以及将这个字体用这个字体渲染到本地图片文件 获取字符在字体里面的信息,需要先获取到字符在字体里面的索引...face.LoadGlyph(glyphIndex, LoadFlags.Default, LoadTarget.Normal); 完成以上步骤即可使用以下代码,获取到字符的信息...gitee 上,可以使用如下命令行拉取代码 先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码 git init git remote add

    57210

    谷歌PageSpeed提示利用font-display控制网页字体可见性的加载和替换

    新主题搭建完成了,可能时间上可以充裕一些,在整理模板优化性能的时候,看到谷歌 PageSpeed Insights 的诊断结果经常会有一项目:确保文本在网页字体加载期间保持可见状态,解释就是说利用 font-display...Web Fonts 以前使用 CSS 指定字体时只能使用用户电脑本地上现有的字体,而由于每个用户电脑上的字体可能都不一样,所以能用的基本上就是操作系统内置的一些字体,例如微软雅黑,宋体,苹果苹方,这些也叫做安全字体...这个是 font-display 的默认值,字体的加载过程由浏览器自行决定,不过基本上和取值为 block 时的处理方式一致。 block 。...与 fallback 的阻塞期一致,但是没有交换期,如果在阻塞期的 100 毫秒内字体加载完成,那么会使用该字体,否则直接使用后备字体。...另外“font-display”是用于指定字体显示策略的 API,而“swap”告诉浏览器使用该字体的文本应立即使用系统字体显示。自定义字体准备就绪后,系统字体将被换出。

    1.4K30

    位图字体的制作与使用

    今天,又遇到有没看文档的开发者来提问位图字体的使用问题,因此将官网文档同步到公众号,让更多人知道,也希望大家遇到问题,先翻一下官网文档和社区,再进行提问。 当我们常规使用文本时,通常采用的是系统字体。...在另存为的窗口,选择要保存位图字体文件的目录,起好文件名,点击保存即可导出生成一个字体描述文件(.fnt格式)和一个字体纹理图文件(.png格式)。...第二步,选中Scene场景,创建一个空类,按下图所示,将该类拖入到场景的runtime属性栏上,然后保存并F12导出。 ? 第三步,打开刚刚创建的类,继承该场景页,并编写位图字体加载和使用的代码。...,在这个方法里,使用位图字体和Text使用其它字体是一样的 */ createText(font:string):void{ var txt:Laya.Text=newLaya.Text...,在这个方法里,使用位图字体和Text使用其它字体是一样的 */ createText(fontName:string):void{ var txt:Laya.Text

    3.6K30

    Web使用HarmonyOS字体的压缩方案

    ,综合考量不同设备的尺寸、使用场景等因素,同时也考虑用户使用设备时因视距、视角的差异带来的字体大小和字重的不同诉求,我们为 HarmonyOS 设计了全新系统默认的字体——HarmonyOS Sans(...HarmonyOS 字体效果 通过 BILIBILI(哔哩哔哩)主站的使用效果来看,能明显发现 HarmonyOS 字体在 Windows 低分辨率pixel-ratio 的影响 如果需要全站使用同一种字体,那么我们或许需要同时加载 Regular、Medium、Bold 等不同字重的字体文件,这里给一个参考: HarmonyOS_Sans_SC_Regular.ttf...输出字体格式 我们将 unicode 写入 unicode.txt 文件中,使用 --unicodes-file=即可使用。...待所有字体压缩完成后,我们在 CSS 中使用 unicode-range属性来调用对应 unicode 区域的字体文件。

    1.4K30

    使用KNN和SVM算法实现手写字体识别分类

    ---- 下面分别采用的是k近邻算法(KNN)和支持向量机(SVM)算法实现的手写数字识别。...可知数据在测试集和训练集中分布平稳 模型构造 KNN error = 0 total = len(y_train) def KNN(n_neighbors): knn = KNeighborsClassifier...超参数n=10时,模型的错误率:0.024312896405919715 绘制不同k值下错误率图形 使用交叉验证网格搜索的方式选择最优模型 estimator = KNeighborsClassifier...param_dict, cv=3) estimator.fit(x_train,y_train) y_predict = estimator.predict(x_test) #print("比对预测结果和真实值...超参数C=10000.0时,模型的正确率:0.9904862579281184 超参数C=100000.0时,模型的正确率:0.9904862579281184 绘制图形 模型小结 支持向量机,有大量的核函数可以使用

    2.1K30

    Gatsby 中怎么加载使用文件资源?

    一、Gatsby 怎么使用文件资源? 对于 图片、音频、视频文、svg、字体等文件,怎么导入Gatsby中?...--- 二、解决方案 把文件导入到Gatsby项目中使用,有两种方式:import 和 static folder. import :Gatsby 会在编译期对 import 导入的资源进行优化(压缩、...文件资源导入推荐使用此方式。 static folder :作为备用导入文件资源的方式,适用于文件资源想要明确访问路径。...logo.png 会拷贝到 public/logo.png render() { return ; } ---- 三、补充信息 1、字体文件怎么加载使用...2、图片文件更多使用方法? 详情,看这里! 3、视频文件怎么加载使用? 详情,看这里! --- 四、参考文档 Gatsby 中怎么加载使用文件资源?

    1.2K20

    PHPimagettftext字体文件ttc的使用方法

    在PHP编程开发中,使用字体文件ttc来渲染文本是一项非常实用的技术。ttc文件是TrueType字体集合文件的缩写,它可以包含多个TrueType字体,因此在使用时需要进行一些特殊处理。...因此,在使用ttc文件时,我们需要先确定要使用的字体在ttc文件中的索引。一般来说,第一个字体的索引为0,第二个字体的索引为1,以此类推。...PHPimagettftext字体文件ttc的使用方法接下来,我们需要使用PHP的imagettftext函数来渲染文本。此函数可以接受一个字体文件的路径作为参数,但是不能直接使用ttc文件的路径。...需要注意的是,由于我们需要在临时文件中存储ttf文件,因此在使用完毕后需要删除临时文件,以避免浪费空间和造成安全隐患。...这种方法简单实用,适用于需要使用多个TrueType字体的情况。希望本文的介绍能够对大家有所帮助。

    58440

    CSS样式中汉字和字母分别使用不同字体的方法

    说来也巧最近不知道发点什么文章,在后台测试代码的时候看见网友在文章“修改网页自定义字体的CSS代码+图文教程”反馈,怎么在css里汉字和字母使用不同的字体,应该怎么判断和实现,这个问题问得好,文章有内容了...这时候,操作系统很有可能无法按照显示名称找到正确的字体,所以我们要记住的第一件事情就是: 同时声明中文字体的字体名称(英文)和显示名称(中文),就像这样: Font-family: SimSun, “宋体...遗憾的是,中文市场还有大量的用户在使用 Windows XP,宋体才是他们的主要中文字体。...还会暴露出一些奇怪的 bug,如在这些版本号的浏览器下使用中文字体(比方微软雅黑),要把该中文字体放到font-family属性的首位,可是会导致英文字体也会使用该中文字体渲染。...即在这些浏览器(IE7、IE8)下不支持在font-family属性中为英文和中文字体分别使用不同的字体,所以我最终还是选择不区别,毕竟折腾来回意义并不是很大,但是代码却多了很多。

    5K10

    设置 IntelliJ IDEA 主题和字体的方法

    今天说一说设置 IntelliJ IDEA 主题和字体的方法[通俗易懂],希望能够帮助大家进步!!! 给大家推荐一个比较有趣的公众号,一个陌生人的生活日记。...不知道大家感受如何,反正博主看到这么小的字体,当真是头晕眼花啊!因此,接下来,就让我们一起尝试着把 IntelliJ IDEA 的主题和字体都重新设置一遍,看看到底什么样的模式我们看着最舒服。...在这里,有一点需要注意,那就是:**有的字体是包含中文的,有的字体则是不包含中文的。**一般情况下,使用英文的国家是不需要额外担心乱码问题的,但是我们需要啊!...例如,Courier New和Monaco就是纯英文字体,而Microsoft YaHei就是包含中文的字体。...标注 5 所示的Secondary font表示第二字体,因为 IntelliJ IDEA 的编码字体有「第一字体」和「第二字体」之分,当有些字符在第一字体不能支持的时候,将会自动使用第二字体进行支持。

    1K20

    设置 IntelliJ IDEA 主题和字体的方法

    因此,接下来,就让咱们一起尝试着把 IntelliJ IDEA 的主题和字体都重新设置一遍,看看到底什么样的模式我们看着最舒服。 2 主题修改 2.1 界面主题修改 ?...如上图所示,这是在选择 Windows 主题、点击Apply之后的效果,为纯白色主题。 2.2 代码编辑区主题修改 ? 标注1:主题选择区; 标注2:Default 和 Darcula,两个主题。...在这里,有一点需要注意,那就是:有的字体是包含中文的,有的字体则是不包含中文的。一般情况下,使用英文的国家是不需要额外担心乱码问题的,但是我们需要啊!...例如,Courier New和Monaco就是纯英文字体,而Microsoft YaHei就是包含中文的字体。 3.2 代码编辑区字体修改 ?...标注5 所示的Secondary font表示第二字体,因为 IntelliJ IDEA 的编码字体有「第一字体」和「第二字体」之分,当有些字符在第一字体不能支持的时候,将会自动使用第二字体进行支持。

    9.2K100

    设置 IntelliJ IDEA 主题和字体的方法

    不知道大家感受如何,反正博主看到这么小的字体,当真是头晕眼花啊!因此,接下来,就让我们一起尝试着把 IntelliJ IDEA 的主题和字体都重新设置一遍,看看到底什么样的模式我们看着最舒服。...在这里,有一点需要注意,那就是:**有的字体是包含中文的,有的字体则是不包含中文的。**一般情况下,使用英文的国家是不需要额外担心乱码问题的,但是我们需要啊!...例如,Courier New和Monaco就是纯英文字体,而Microsoft YaHei就是包含中文的字体。...标注 5 所示的Secondary font表示第二字体,因为 IntelliJ IDEA 的编码字体有「第一字体」和「第二字体」之分,当有些字符在第一字体不能支持的时候,将会自动使用第二字体进行支持。...3.3 控制台输出字体修改 如上图所示,我们定位到Editor > Colors & Fonts > Console Font界面,细心观察之下,我们会发现这个界面和Editor > Colors &

    1.7K30

    woff字体图元结构剖析,自定义字体的制作与匹配和识别

    TrueType: Windows和Mac系统最常用的字体格式,基于轮廓技术的数学模式来进行定义,比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。...,分别表示字体创建时间和字体最后修改时间,使用8个字节记录从1904年1月1日午夜12:00开始的秒数。...em-squrare的大小决定字体的图元被缩放的方式和质量。字体头中保存了每个em-square的格数和能 包含所有图元的边界框。Em-square的有效值是从16到16384。...我们使用上次下载的address.woff文件作为已知训练集,然后将shopNum.woff字体文件的轮廓图,进行一定的乱序处理,看看能否正确的提取出需要的文字。...此时我们需要使用机器学习或深度学习相关的算法,或者能够完成图元数据渲染字体图形的大佬可以直接使用逻辑算法完成。

    7.8K20
    领券