离线使用没有API的谷歌字体


Using Google Fonts without API offline

我想使用谷歌字体没有他们的API(尝试许多字体为我的网站)。所以,我从这里下载了一个快照:https://github.com/google/fonts并复制到我的web目录。

如果需要,我可以使用ttf文件,但是链接提供了元数据。

:
    {
     "name": "Open Sans",
     "designer": "Steve Matteson",
     "license": "Apache2",
     "visibility": "External",
     "category": "Sans Serif",
     "size": 113987,
     "fonts": [
{
  "name": "Open Sans",
  "style": "normal",
  "weight": 300,
  "filename": "OpenSans-Light.ttf",
  "postScriptName": "OpenSans-Light",
  "fullName": "Open Sans Light",
  "copyright": "Digitized data copyright © 2010-2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "italic",
  "weight": 300,
  "filename": "OpenSans-LightItalic.ttf",
  "postScriptName": "OpenSansLight-Italic",
  "fullName": "Open Sans Light Italic",
  "copyright": "Digitized data copyright © 2010-2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "normal",
  "weight": 400,
  "filename": "OpenSans-Regular.ttf",
  "postScriptName": "OpenSans",
  "fullName": "Open Sans",
  "copyright": "Digitized data copyright © 2010-2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "italic",
  "weight": 400,
  "filename": "OpenSans-Italic.ttf",
  "postScriptName": "OpenSans-Italic",
  "fullName": "Open Sans Italic",
  "copyright": "Digitized data copyright © 2010-2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "normal",
  "weight": 600,
  "filename": "OpenSans-Semibold.ttf",
  "postScriptName": "OpenSans-Semibold",
  "fullName": "Open Sans Semibold",
  "copyright": "Digitized data copyright © 2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "italic",
  "weight": 600,
  "filename": "OpenSans-SemiboldItalic.ttf",
  "postScriptName": "OpenSans-SemiboldItalic",
  "fullName": "Open Sans Semibold Italic",
  "copyright": "Digitized data copyright © 2010-2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "normal",
  "weight": 700,
  "filename": "OpenSans-Bold.ttf",
  "postScriptName": "OpenSans-Bold",
  "fullName": "Open Sans Bold",
  "copyright": "Digitized data copyright © 2010-2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "italic",
  "weight": 700,
  "filename": "OpenSans-BoldItalic.ttf",
  "postScriptName": "OpenSans-BoldItalic",
  "fullName": "Open Sans Bold Italic",
  "copyright": "Digitized data copyright © 2010-2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "normal",
  "weight": 800,
  "filename": "OpenSans-ExtraBold.ttf",
  "postScriptName": "OpenSans-Extrabold",
  "fullName": "Open Sans Extrabold",
  "copyright": "Digitized data copyright © 2011, Google Corporation."
},
{
  "name": "Open Sans",
  "style": "italic",
  "weight": 800,
  "filename": "OpenSans-ExtraBoldItalic.ttf",
  "postScriptName": "OpenSans-ExtraboldItalic",
  "fullName": "Open Sans Extrabold Italic",
  "copyright": "Digitized data copyright © 2010-2011, Google Corporation."
}
],
  "subsets": [
"cyrillic",
"cyrillic-ext",
"devanagari",
"greek",
"greek-ext",
"latin",
"latin-ext",
"menu",
"vietnamese"
],
"dateAdded": "2011-02-02"
}

我可以知道我如何使用这个json文件为每个字体服务,以获得适当的css声明。例如,当您看到http://fonts.googleapis.com/css?family=Open+Sans时,API提供了CSS,之后我可以使用任何类型的Open Sans字体。

那么,我如何使用这个元数据json文件来生成css(这是由API生成的?

我正在使用PHP, Jquery等为我的项目。

没关系。我为此编写了自己的代码。我读取json文件使用php根据get请求,然后解码json获取内容,然后将做css。

你必须改变

    <?php
if(isset($_GET["family"])&&isset($_GET["licence"]))
{
$family=$_GET["family"];
$licence=$_GET["licence"];
$family=strtolower($family);
$licence=strtolower($licence);
if($family==""||$licence=="")
{
    die("");
}
$dir="";
if($licence=="apache")
{
    $dir="apache";
}
else
if($licence=="ofl")
{
    $dir="ofl";
}
$path="Path to json file"; //have format like "/fonts/fonts-master/".$dir."/".$family."/METADATA.json";
if(file_exists($path))
{
    $contents=file_get_contents($path);
    $obj=json_decode($contents);
    echo $obj->{'fonts'}[0]->{'weight'}; 
    //var_dump(json_decode($contents));
}
else
{
    die("");
}
   }
//You can now use these json values to get the css
?>

我没有做这部分直到现在,但显然你必须设置header为header(" Content-type: text/css ");当提供CSS文件