网页中嵌入任意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：

其中 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 webIcons = new ArrayList();
    private Map fontFace=new HashMap();

    @Override
    public void startDocument() throws SAXException {
        System.out.println("---->startDocument() is invoked...");
    }

    @Override
    public void endDocument() throws SAXException {
        System.out.println("---->endDocument() is invoked...");
    }
    @Override
    public void startElement(String uri, String localName, String qName, Attributes attributes) throws SAXException {
        if (qName.equalsIgnoreCase("font-face")){
            for (int i=0;i*/
            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 getWebIcons() {
        return webIcons;
    }

    public Map getFontFace() {
        return fontFace;
    }
}