文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >有没有一种“快速”的方式来获取有关可变谷歌字体的信息？

问有没有一种“快速”的方式来获取有关可变谷歌字体的信息？
EN

Stack Overflow用户
提问于 2021-09-01 16:18:11
回答 2查看 228关注 0票数 2

我正在构建一个UI作为一个产品的一部分，使它很容易选择，选择和风格谷歌字体。我受到不同字体的挑战，因为我找不到获取这些信息的好方法。developer通过一个大型JSON字符串为所有Google字体提供元数据。但是，它似乎不包含任何允许开发人员识别哪些字体是可变的数据。它们都是标准字体。

是否有一种快速获取此类数据的方法？通过fast，我谈论的是类似于Google Font的developer API的东西，但是使用了各种变量字体的数据，其中包括：

  • 哪些字体是可变的？
  • 变量字体使用的是哪些轴？

目前，我所看到的探索可变字体及其轴的唯一推荐方法是将字体加载到网页中，并在开发人员工具中使用Firefox的字体编辑器手动获取数据。但是现在Google字体中有112个可变字体，收集这些信息可能需要几天的时间。因此，我的问题是:是否有更快的方法为谷歌字体中的可变字体获取元数据？

axes
google-font-api
google-fonts
variable-fonts
EN

回答 2

Stack Overflow用户

发布于 2021-09-07 03:47:51

我正在开发一个字体选择插件，我遇到了一个类似的问题，所以我开始调查谷歌字体的主配送点，直到我找到我要找的东西。Google的字体站点执行对以下API端点的调用。

https://fonts.google.com/metadata/fonts

返回以下文本文件。

代码语言：javascript
运行
复制
)]}'{"axisRegistry": [
{
  "tag": "FILL",
  "displayName": "Fill",
  "min": 0.0,
  "defaultValue": 0.0,
  "max": 1.0,
  "precision": -2,
  "description": "The Fill axis is intended to provide a treatment of the design that fills in transparent forms with opaque ones (and sometimes interior opaque forms become transparent, to maintain contrasting shapes). Transitions often occur from the center, a side, or a corner, but can be in any direction. This can be useful in animation or interaction to convey a state transition. The numbers indicate proportion filled, from 0 (no treatment) to 1 (completely filled).",
  "fallbacks": [
    {
      "name": "Normal",
      "value": 0.0
    },
    {
      "name": "Filled",
      "value": 1.0
    }
  ]
} ...],"familyMetadataList": [{
  "family": "Alegreya",
  "displayName": null,
  "category": "Serif",
  "size": 425570,
  "subsets": [
    "menu",
    "cyrillic",
    "cyrillic-ext",
    "greek",
    "greek-ext",
    "latin",
    "latin-ext",
    "vietnamese"
  ],
  "fonts": {
    "400": {
      "thickness": 4,
      "slant": 1,
      "width": 6,
      "lineHeight": 1.361
    },
    "400i": {
      "thickness": 4,
      "slant": 4,
      "width": 6,
      "lineHeight": 1.361
    },
    "500": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "500i": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "600": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "600i": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "700": {
      "thickness": 7,
      "slant": 1,
      "width": 7,
      "lineHeight": 1.361
    },
    "700i": {
      "thickness": 6,
      "slant": 4,
      "width": 6,
      "lineHeight": 1.361
    },
    "800": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "800i": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "900": {
      "thickness": 8,
      "slant": 1,
      "width": 7,
      "lineHeight": 1.361
    },
    "900i": {
      "thickness": 8,
      "slant": 4,
      "width": 6,
      "lineHeight": 1.361
    }
  },
  "axes": [
    {
      "tag": "wght",
      "min": 400.0,
      "max": 900.0,
      "defaultValue": 400.0
    }
  ],
  "unsupportedAxes": [],
  "designers": [
    "Juan Pablo del Peral",
    "Huerta Tipográfica"
  ],
  "lastModified": "2021-02-11",
  "dateAdded": "2011-12-19",
  "popularity": 159,
  "trending": 828,
  "defaultSort": 164,
  "androidFragment": null,
  "isNoto": false
}...],...}

请注意，虽然上面的内容类似于JSON文件，但它将被视为文本文件，因此您必须从文本文件的顶部删除这个部分)]}'，这样就可以将其解析为JSON文件。唯一重要的顶级属性(就用例而言)是"familyMetadataList“属性，顾名思义，它包含所有字体元数据，其中包括任意给定字体的轴。您必须在"familyMetadataList“支柱上循环，看看字体的axes成员是否有一个不是空的数组，从这里我们可以推断出它是一个可变的字体。你可以做一些像这样简单的事情来找出哪种字体是可变的。

​

代码语言：javascript
运行
复制
const variableFonts=[];
const googleFontJSON = {
 "familyMetadataList": [
 {
  "family": "Alegreya",
  "displayName": null,
  "category": "Serif",
  "size": 425570,
  "subsets": [
    "menu",
    "cyrillic",
    "cyrillic-ext",
    "greek",
    "greek-ext",
    "latin",
    "latin-ext",
    "vietnamese"
  ],
  "fonts": {
    "400": {
      "thickness": 4,
      "slant": 1,
      "width": 6,
      "lineHeight": 1.361
    },
    "400i": {
      "thickness": 4,
      "slant": 4,
      "width": 6,
      "lineHeight": 1.361
    },
    "500": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "500i": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "600": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "600i": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "700": {
      "thickness": 7,
      "slant": 1,
      "width": 7,
      "lineHeight": 1.361
    },
    "700i": {
      "thickness": 6,
      "slant": 4,
      "width": 6,
      "lineHeight": 1.361
    },
    "800": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "800i": {
      "thickness": null,
      "slant": null,
      "width": null,
      "lineHeight": 1.361
    },
    "900": {
      "thickness": 8,
      "slant": 1,
      "width": 7,
      "lineHeight": 1.361
    },
    "900i": {
      "thickness": 8,
      "slant": 4,
      "width": 6,
      "lineHeight": 1.361
    }
  },
  "axes": [
    {
      "tag": "wght",
      "min": 400.0,
      "max": 900.0,
      "defaultValue": 400.0
    }
  ],
  "unsupportedAxes": [],
  "designers": [
    "Juan Pablo del Peral",
    "Huerta Tipográfica"
  ],
  "lastModified": "2021-02-11",
  "dateAdded": "2011-12-19",
  "popularity": 159,
  "trending": 828,
  "defaultSort": 164,
  "androidFragment": null,
  "isNoto": false
},
    {
      "family": "Alegreya SC",
      "displayName": null,
      "category": "Serif",
      "size": 381295,
      "subsets": [
        "menu",
        "cyrillic",
        "cyrillic-ext",
        "greek",
        "greek-ext",
        "latin",
        "latin-ext",
        "vietnamese"
      ],
      "fonts": {
        "400": {
          "thickness": 4,
          "slant": 1,
          "width": 7,
          "lineHeight": 1.361
        },
        "400i": {
          "thickness": 4,
          "slant": 4,
          "width": 7,
          "lineHeight": 1.361
        },
        "500": {
          "thickness": null,
          "slant": null,
          "width": null,
          "lineHeight": 1.361
        },
        "500i": {
          "thickness": null,
          "slant": null,
          "width": null,
          "lineHeight": 1.361
        },
        "700": {
          "thickness": 6,
          "slant": 1,
          "width": 7,
          "lineHeight": 1.361
        },
        "700i": {
          "thickness": 6,
          "slant": 3,
          "width": 7,
          "lineHeight": 1.361
        },
        "800": {
          "thickness": null,
          "slant": null,
          "width": null,
          "lineHeight": 1.361
        },
        "800i": {
          "thickness": null,
          "slant": null,
          "width": null,
          "lineHeight": 1.361
        },
        "900": {
          "thickness": 8,
          "slant": 1,
          "width": 7,
          "lineHeight": 1.361
        },
        "900i": {
          "thickness": 8,
          "slant": 3,
          "width": 7,
          "lineHeight": 1.361
        }
      },
      "axes": [],
      "unsupportedAxes": [],
      "designers": [
        "Juan Pablo del Peral",
        "Huerta Tipográfica"
      ],
      "lastModified": "2021-03-24",
      "dateAdded": "2011-12-19",
      "popularity": 436,
      "trending": 249,
      "defaultSort": 443,
      "androidFragment": null,
      "isNoto": false
    }
]}; // The array of font meta data
googleFontJSON.familyMetadataList.forEach(font => {     
  if (font.axes.length) {
    font.isVariable=true;
  } else {
    font.isVariable=false;
  }
});
console.log(googleFontJSON);

​

如何分析数据当然完全是你自己的特权。祝你的项目好运，Mr.Steven。您还可以通过在https://fonts.google.com/metadata/fonts中找到的axis注册表支柱获得有关任何给定变量字体的轴步骤的更多信息。只需检查精密支柱。例如，带有0.1步的轴，如"opsz“和"wdth”，其精度设置为-1，轴的精度设置为-1，轴的精度设置为-2，轴的精度设置为-2。

​

代码语言：javascript
运行
复制
  "axisRegistry": [
    {
      "tag": "opsz",
      "displayName": "Optical size",
      "min": 6.0,
      "defaultValue": 14.0,
      "max": 144.0,
      "precision": -1, //<=== Here
      "description": "Adapt the ...",
      "fallbacks": [
        {
          "name": "6pt",
          "value": 6.0
        },
        {
          "name": "7pt",
          "value": 7.0
        }...
      ]
    },...

​

票数 1
EN

Stack Overflow用户

发布于 2021-09-30 09:42:23

我喜欢来自Stranger1586的回答。但是，为了正确构建UI元素(如滑块)，我确实需要每个轴的步骤数据。因此，我决定写一个刮刀，从https://fonts.google.com/variablefonts中刮取数据。根据Google的GitHub页面，该页面包含所有变量字体和所有受支持的轴上的更新数据。

刮刀器为每个字体系列创建一个带有轴数据的JSON文件。我希望这可能对其他有同样需要的人有所帮助。以下是代码：

代码语言：javascript
运行
复制
#!/usr/bin/env python3
# -*- coding: utf-8 -*-

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.common.exceptions import TimeoutException
from selenium.webdriver.firefox.options import Options

from bs4 import BeautifulSoup
import json

def get_variable_fonts_data():
    print('Opening: Google Variable Fonts page...')
    options = Options()
    options.headless = True
    gecko_path = r'D:\Anaconda3\envs\py37\Lib\site-packages\helium\_impl\webdrivers\windows\geckodriver.exe'
    url = 'https://fonts.google.com/variablefonts'
    browser = webdriver.Firefox(options=options, executable_path=gecko_path)
    browser.get(url)
    timeout = 10  # seconds

    # Wait for the table element as it is not part of the page source but is generated with JavaScript
    try:
        WebDriverWait(browser, timeout).until(EC.presence_of_element_located((By.TAG_NAME, 'table')))
        print('Generating font table')
    except TimeoutException:
        print("Loading took too much time!")

    soup = BeautifulSoup(browser.page_source, 'html.parser')
    table = soup.find('table')
    table_head = table.find('thead').find('tr')
    header_values = []
    for cell in table_head.find_all('th'):
        header_values.append(cell.encode_contents().decode("utf-8").strip())
    table_body = table.find('tbody')
    variable_fonts_data = {}
    for row in table_body.find_all('tr'):
        axis_data = {}
        cells = row.find_all('td')
        font_family_name = cells[0].find('a').encode_contents().decode("utf-8").strip()
        if not (font_family_name in variable_fonts_data):
            variable_fonts_data[font_family_name] = {'Axes': {}}

        axis_data[header_values[2]] = cells[2].encode_contents().decode("utf-8").strip()  # Default
        axis_data[header_values[3]] = cells[3].encode_contents().decode("utf-8").strip()  # Min
        axis_data[header_values[4]] = cells[4].encode_contents().decode("utf-8").strip()  # Max
        axis_data[header_values[5]] = cells[5].encode_contents().decode("utf-8").strip()  # Step

        variable_fonts_data[font_family_name]['Axes'][cells[1].encode_contents().decode("utf-8").strip()] = axis_data

    return variable_fonts_data


with open('google_variable_fonts.json', 'w') as fonts_file:
    json.dump(get_variable_fonts_data(), fonts_file)
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69017409

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档