一个美观现代的网站，通过瀑布流布局展示名言名句，使用HTML、CSS和JavaScript实现。

• 响应式瀑布流卡片布局
• 采用毛玻璃和拟物化的现代UI设计
• 通过本地JSON存储名言名句数据
• 卡片动画效果
• 移动端友好设计
• 使用宋体字体和Google Fonts备用字体

• index.html - 主HTML文件
• css/style.css - 带有现代毛玻璃效果的样式
• css/fonts.css - 字体定义和声明
• js/quotes.js - 名言名句的本地JSON数据
• js/main.js - 处理瀑布流布局的JavaScript
• fonts/ - 自定义字体文件目录
  • Songti.ttc - 宋体字体文件
  • font-demo.html - 展示自定义字体的示例页面

只需在网页浏览器中打开index.html即可查看名言名句展示。

您可以通过编辑quotes.js文件来自定义名言名句。每个名言对象应包含：

• text: 名言文本
• author: 作者名称
• source: 出处
• avatar: 作者头像的URL

网站使用宋体字体，存放在fonts/目录下：

• 文案使用宋体的Black字重（font-weight: 900）
• 作者使用宋体的Bold字重（font-weight: 700）
• 出处使用宋体的Regular字重（font-weight: 400）

如果本地字体文件不可用，网站将使用Google Fonts作为备用。

• 毛玻璃效果 - 透明、模糊的背景配以轻薄边框
• 卡片式布局 - 每条名言显示在独立的卡片中
• 响应式列数 - 根据屏幕尺寸调整
• 悬停动画 - 卡片在悬停时有动画效果
• 入场动画 - 卡片以交错方式淡入
• 自定义排版 - 为标题和正文使用优雅的字体搭配

此网站在支持backdrop-filter等CSS特性的现代浏览器中效果最佳。