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

方案一：

使用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 73H680V159L712 142H829V568H571V654L602 637H957V55ZM242 75H113V438H43L136 647L118 666H267L202 512H242V75ZM426 74H298V477L280 496H426V74ZM552 532H414L342 647L309 666H470L552 532Z', missing=false}]}

html中svg：

<div class="words" words="我们" oldwords="我们" webfontid="3"> <span><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="width: 24.06015037593985px;height: 24.06015037593985px; fill: currentColor; overflow:hidden;"><path d="M813 319L922 355V262L846 236L918 54H782L731 197L477 111V209L700 282L636 458H347V349L479 376V282L347 255V54H129L104 100H229V230L69 197V294L229 326V458H69V506H229V610L89 604V651L491 666L465 619L347 614V506H619L561 666H676L740 506H931L905 458H758L813 319ZM781 540L759 657H876L899 540H781Z" transform="translate(0, 860) scale(1, -1)"/></svg></span>  <span><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="width: 24.06015037593985px;height: 24.06015037593985px; fill: currentColor; overflow:hidden;"><path d="M313 668L208 451H255V53H139V404H62L194 668H313ZM823 645H937V55H685L670 99H823V645ZM474 53H338V501H474V53ZM492 526H367L341 663H466L492 526ZM823 645L797 597H511V645H823Z" transform="translate(0, 860) scale(1, -1)"/></svg></span> </div>

其中 transform="translate(0, 860) scale(1, -1)" // 860 参照： ResultData中的ascent

JAVA代码：参照 https://github.com/ahdshao/text-to-svg

方案三：

方案二每次执行需要用时100+ms，用时过长。解决用时问题，将文字path数据持久化到Redis（字体下的文字path几乎永久不会改变，只会新增）提供查询服务。

执行效率10ms以内，命中jvm 0ms以内

1、使用apach batik 工具将TTF文件转成SVG文件

java -jar batik-ttf2svg.jar C:\Users\zhaodahao\Desktop\字体包\站酷快乐体.ttf -l 32 -h 65374 -o C:\Users\zhaodahao\Desktop\test\站酷快乐体.svg

2、使用SAX解析SVG文件

           log.info("开始解析svg文件：" + xmlPath);//获取SAX分析器的工厂实例，专门负责创建SAXParser分析器SAXParserFactory saxParserFactory = SAXParserFactory.newInstance();//获取SAXParser分析器的实例SAXParser saxParser = saxParserFactory.newSAXParser();XmlSAXHandler saxHandler = new XmlSAXHandler();saxParser.parse(new File(xmlPath), saxHandler);log.info("解析 " + name + ".svg 用时：" + (System.currentTimeMillis() - start));log.info("WebIcon数量：" + saxHandler.getWebIcons().size());long ss = System.currentTimeMillis();// 清空缓存中的数据jimClient.del(RedisTypeEnum.FONT_DATA.getCode() + webFontId);// 保存字体path数据缓存batchAddWebIcon(webFontId, saxHandler.getWebIcons(), 10000);log.info("保存字体数据 用时：" + (System.currentTimeMillis() - ss));WebFont webFont=new WebFont();webFont.setId(webFontId);webFont.setDescName(name);webFont.setFontFace(saxHandler.getFontFace());//添加字体类型缓存jimClient.hSet(RedisTypeEnum.FONT_TYPE.getCode(),webFontId+"",gson.toJson(webFont));return true;

package com.zdh.xml.handler;import com.zdh.webfont.common.entity.WebIcon;
import com.zdh.webfont.common.util.UnicodeConverter;
import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** 字体SVG解析器* Date: 16-10-25* Time: 上午10:56*/
public class XmlSAXHandler extends DefaultHandler {private List<WebIcon> webIcons = new ArrayList<WebIcon>();private Map<String,String> fontFace=new HashMap<String, String>();@Overridepublic void startDocument() throws SAXException {System.out.println("---->startDocument() is invoked...");}@Overridepublic void endDocument() throws SAXException {System.out.println("---->endDocument() is invoked...");}@Overridepublic void startElement(String uri, String localName, String qName, Attributes attributes) throws SAXException {if (qName.equalsIgnoreCase("font-face")){for (int i=0;i<attributes.getLength();i++) {fontFace.put(attributes.getQName(i),attributes.getValue(i));}}if (qName.equalsIgnoreCase("glyph")){/* <glyph glyph-name="numbersign" unicode="#" horiz-adv-x="188" d="M23 121v26h36l11 54h31l-10 -54h30l10 54h32l-11 -54h29v-26h-34l-9 -49h30v-26h-35l-13 -67h-31l13 67h-30l-13 -67h-32l13 67h-30v26h35l10 49h-32zM86 121l-9 -49h30l9 49h-30z" />*/String code = attributes.getValue("unicode");if (code !=null){if (code.startsWith("&#x")){    //   code = òcode=code.substring(3,code.length()-1);}else{code= UnicodeConverter.charToUnicode(code.charAt(0));}WebIcon icon = new WebIcon();icon.setName(attributes.getValue("glyph-name"));icon.setUnicode(code);icon.setPath(attributes.getValue("d"));webIcons.add(icon);}}}public List<WebIcon> getWebIcons() {return webIcons;}public Map<String, String> getFontFace() {return fontFace;}
}

网页中嵌入任意web字体解决方案相关推荐

woff, 在网页中嵌入任意字体的解决方案
woff, 在网页中嵌入任意字体的解决方案 http://topic.csdn.net/u/20110705/10/98e79aba-1ddf-42fa-84a9-b79ec494cb69.html ...
在网页中嵌入任意字体（特殊字体/自定义字体）的解决方案
在网页中嵌入任意字体(特殊字体/自定义字体)的解决方案参考文章: (1)在网页中嵌入任意字体(特殊字体/自定义字体)的解决方案 (2)https://www.cnblogs.com/yuwenson ...
在网页中嵌入任意字体的解决方案---google在线字体库应用
在网页中嵌入任意字体的解决方案---google在线字体库应用参考文章: (1)在网页中嵌入任意字体的解决方案---google在线字体库应用 (2)https://www.cnblogs.com/ ...
在网页中嵌入任意字体的解决方案（insert any font）
字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要 ...
如何在网页中嵌入自己想要的字体(实例下载)
记得以前在国外那些人的网站看到那些字体怎么那么漂亮.而且不像电脑里面自带的字体.原来是通过这个方法来实现的.厉害,我觉得中文那些比较好看的字体,如果能都看到那该多好,不过看中文的TTF字体10M左右. ...
如何在网页中嵌入自己想要的字体(推荐阅读)
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
网页中使用任意字体之实际操作
之前对"在网页中嵌入非系统自带字体"做过一点研究,虽然技术上能实现,但是对国内来说,没有太大的实际意义,因为一个中文体文件起码20M+,而且各个浏览器支持的字体文件还都不一样,也就 ...
flash 嵌入html代码,flash嵌入html在html网页代码中嵌入Flash文件的解决方案(下).doc...
flash嵌入html在html网页代码中嵌入Flash文件的解决方案(下).doc flash嵌入在网页代码中嵌入Flash文件的解决方案(下) 在代码中嵌入Flash文件一直都是广大web爱 ...
网页中嵌入flash的最佳方案
http://solomon.athost.net/?p=549 网页中嵌入flash的最佳方案各种浏览器差异悬殊,开发者应如何在网页中嵌入flash才是最佳方案?本文介绍的原理亦被应用在swfob ...

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

网页中嵌入任意web字体解决方案相关推荐

最新文章

热门文章