axes - 是否有一种“快速”的方式来获取有关可变 Google 字体的信息?
问题描述
我正在构建一个 UI 作为产品的一部分,以便轻松选择、选择和设置 Google 字体的样式。我受到可变字体的挑战,因为我找不到获取这些信息的好方法。开发者 API 通过一个大的 JSON 字符串为所有 Google 字体提供元数据。但是,它似乎不包含任何可以让开发人员辨别哪些字体是可变的数据。它们都“看起来”是标准字体。
有没有快速获取此类数据的方法?很快,我说的是类似于 Google Font 的开发人员 API 的东西,但包含各种可变字体的数据,其中包括:
- 哪些字体是可变的?
- 可变字体附带哪些轴?
目前,我见过的探索可变字体及其轴的唯一推荐方法是将字体加载到网页中,并在开发人员工具中使用 Firefox 的字体编辑器手动获取数据。但使用 Google 字体中当前的 112 种可变字体,收集这些信息可能需要数天时间。所以我的问题是:有没有更快的方法来获取谷歌字体中可变字体的元数据?
解决方案
我喜欢Stranger1586 的回答。但我确实还需要每个轴的步骤数据,以便正确构建滑块等 UI 元素。所以我决定写一个刮板从https://fonts.google.com/variablefonts刮取数据。根据 Google Font 的 GitHub 页面,该页面包含所有可变字体和所有支持轴的更新数据。
刮板创建一个 JSON 文件,其中包含每个字体系列的轴数据。我希望它可能对其他有相同需求的人有所帮助。这是代码:
#!/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)
推荐阅读
- javascript - 广告拦截器 - Catch net::ERR_BLOCKED_BY_CLIENT
- nlp - 您如何使用 word2vec 计算 k-means 的文本文档之间的距离?
- python - 如何在python3中解构异常?
- scala - 当子句中的 SparkSQL 自定义函数
- php - PHP PDO:SQLSTATE [HY000] [2002] 连接被拒绝
- java - Pivotal GemFire:Spring Data GemFire 中的 PDX 序列化程序配置
- http - 手动编写 HTTP 尾标
- windows - WINDBG:查看未命名命名空间中的变量值
- web-parts - SharePoint 框架 Web 部件滚动
- node.js - NodeJS VM2设置为“重定向”时访问控制台的正确方法