php - 离线使用没有 API 的 Google 字体

Question

我想在没有 API 的情况下使用 Google 字体(为我的网站尝试多种字体)。所以，我从这里下载了一个快照: https://github.com/google/fonts并将其复制到我的网站目录。

如果需要，我可以使用 ttf 文件，但链接为具有此结构的每种字体提供了一个 metadata.json 文件:

    {
     "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 等。

提前致谢。

Answer 1

没关系.. 我为此编写了自己的代码。我根据获取请求使用 php 读取 json 文件，然后解码 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(“Content-type: text/css”);提供 css 文件时