Question

我正在使用SVG开发Web应用程序。

计划是使用Google Webfonts API让用户选择其字体类型，然后在SVG中显示其名称。问题是，当我使用Google API访问字体时，它不起作用（恢复为Serif字体）。但是，当我下载Google字体然后直接在我的网络应用程序中引用时，它可以... 有人可以说明如何使这个工作适用于Web应用程序。

以下是目前的代码：

js.onclick=function()

    {
        var val=document.getElementById("txt").value
        var newText = svgDoc.createElementNS("http://www.w3.org/2000/svg","text");
        newText.setAttribute("id", "txxt")
        newText.setAttribute("x",275);
        newText.setAttribute("y",250);
        newText.setAttribute("font-size","50px");
        newText.setAttribute("fill","olive");
        newText.setAttribute("xlink:href",'http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light&subset=latin');
        newText.setAttribute("font-family",'JosefinSansStd-Light');
        var textNode = document.createTextNode(val);
        newText.appendChild(textNode);
        svgRoot.appendChild(newText)
}

Answer 1

基本上所有Google API所做的与CSS中的@ font-face相同，但更容易从不同的字体提供程序加载字体。 CSS @ font-face只能应用于文本。

Answer 2

我认为你需要反过来这样做...即谷歌在文本上工作，而不是在SVG图像上工作，因此你需要有原始文本才能使Google字体工作。

使用谷歌字体apis

2 个答案: