网页中嵌入任意web字体解决方案

本文介绍了三种在网页中嵌入web字体的解决方案:1)利用CSS3的`font-face`;2)将文字转化为SVG路径;3)优化SVG路径缓存到Redis,提高查询效率。针对方案二的效率问题,通过将文字Path数据持久化,实现了10ms内的快速响应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方案一:

使用css3  font-face,详细参照:http://www.w3cplus.com/content/css3-font-face

 

方案二:

文字转svg path,在html中使用svg标签绘制文字

 

String fontPath="D:/IdeaProjects/text2svg/fonts/站酷酷黑.TTF";
String text="我们";
try {
            ResultData  resultData = Text2SvgUtils.toConvert(fontPath, text);
            System.out.println(resultData);
} catch (Exception e) {
            e.printStackTrace();
}
创建Font用时:172
总用时:179ms
ResultData{fontFace=FontFace{fontFamily='HuXiaoBo_KuHei', unitsPerEm=1000, panose='2 1 6 0 3 1 1 1 1 1', ascent=859, descent=-141}, charGlyphList=[CharGlyph{source=我, glyphName='uni6211', unicode='我', horizAdvX=1000, arabicForm='', d='M36 212V319L245 338V432H31V517L63 500H245V558L64 555L35 538V635L491 644Q500 644 511 647T526 664V563L373 560V500H580L567 648H722L704 629L715 500H836L828 633L810 652H945L953 500H970V412Q965 425 955 428T935 432H720L732 286L944 339L967 369V255L740 199L746 124H936L966 141V57H729H727H619L609 166L547 151Q538 146 531 138T519 115V233L601 253L586 432H373V350L513 364L542 399V274L373 260V57H278H277H39V141L70 124H245V249L67 234L36 212Z', missing=false}, CharGlyph{source=们, glyphName='uni4EEC', unicode='们', horizAdvX=1000, arabicForm='', d='M957 55Q952 65 941 69T921 73H6
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值