toolsmoah

Google 字体查看器

搜索和预览 Google 字体。为您的 Web 项目找到完美的字体，并实时查看它们的外观。

字体搜索
搜索或筛选您想要的字体。
Roboto
sans-serif•18 样式
Open Sans
sans-serif•12 样式
Noto Sans JP
sans-serif•9 样式
Montserrat
sans-serif•18 样式
Inter
sans-serif•18 样式
Poppins
sans-serif•18 样式
Lato
sans-serif•10 样式
Material Icons
monospace•1 样式
Roboto Condensed
sans-serif•18 样式
Roboto Mono
monospace•14 样式
Roboto
Sans-serif • 18 样式
你好！Google 字体查看器。 敏捷的棕色狐狸跳过懒惰的狗。 1234567890
获取代码
复制代码以将字体应用于您的 Web 项目。

将上面的代码粘贴到 HTML 文件的 head 标签内。

📚 完整的 Google 字体指南

学习如何有效地使用 Google 字体

🎨🎨 什么是 Google 字体？

Google 字体是 Google 提供的免费 Web 字体服务。

  • 1,400 多个开源字体系列
  • 商业用途免费许可
  • 通过快速 CDN 全球分发
  • 支持各种语言和书写系统
  • 针对响应式网页设计进行了优化

⚡⚡ 如何使用 Web 字体

1. 在 HTML 中使用

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. 在 CSS 中应用

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 性能优化技巧

  • 使用 font-display: swap 防止 FOIT
  • 使用 preconnect 减少 DNS 查找时间
  • 选择性地仅加载所需的字体粗细
  • 使用 subset 参数限制字符集
  • 设置本地字体回退

优化加载示例：

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 响应式排版

在各种设备上实现最佳可读性的设置：

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 字体选择指南

按用途推荐的字体：

  • 正文：Noto Sans KR, Spoqa Han Sans:
  • 标题：Noto Serif KR, Gowun Dodum:
  • 代码：Fira Code, JetBrains Mono:
  • 装饰性：Jua, Gamja Flower:

选择标准：

  • 与品牌标识的一致性
  • 可读性和可访问性
  • 多语言支持范围
  • 加载性能

🔧🔧 高级用法

使用可变字体：

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

使用 CSS 自定义属性：

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ 可访问性注意事项

  • 足够的对比度：WCAG 4.5:1 或更高
  • 适当的行距：建议 1.4~1.6
  • 可读的字体大小：最小 16px
  • 阅读障碍友好：考虑 OpenDyslexic 等

可访问的 CSS 示例：

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 调试和测试

字体加载验证：

  • 在 DevTools 网络选项卡中检查字体文件
  • 在计算样式中检查实际应用的字体
  • 测试 font-display 行为

性能测量工具：

  • Google PageSpeed Insights
  • WebPageTest
  • Lighthouse 字体优化检查

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 实用技巧

项目设置：

  • 在设计系统中定义字体规则
  • 建立字体加载策略
  • 配置回退字体堆栈
  • 设置性能监控

维护：

  • 字体版本管理
  • 清理未使用的粗细
  • 定期性能检查
  • 检查新的字体更新
    Google 字体查看器