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

最新推荐文章于 2025-05-16 13:44:45 发布

原创

最新推荐文章于 2025-05-16 13:44:45 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #字体 #web #svg

本文介绍了三种在网页中嵌入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