练习题与扩展阅读

练习题

基础题

1. 简述sRGB和Adobe RGB两种色彩空间的区别，分别适合什么场景？
2. OLED和LCD显示技术各有什么优缺点？选购显示器时你会优先考虑哪种技术？
3. 常见的网页字体格式有哪些？为什么推荐使用WOFF2格式？
4. 对比JPEG、PNG、WebP三种图像格式的优缺点，分别适合什么场景？
5. Canvas和SVG作为两种2D渲染技术，各有什么特点？分别适合什么应用场景？

实操题

1. 找一张JPEG格式的照片，分别用80%和50%的质量压缩，对比画质和文件大小的差异，找到你认为最佳的压缩质量平衡点。
2. 编写一个简单的HTML页面，分别用Canvas和SVG绘制一个简单的动画（比如移动的矩形），对比两者的代码实现差异和性能表现。
3. 尝试将一个TTF字体转换为WOFF2格式，对比转换前后的文件大小差异。
4. 查看你正在使用的显示器的参数，计算它的PPI是多少，看看是否达到了Retina屏幕的标准。

思考题

1. 为什么显示器使用RGB色彩模型，而印刷使用CMYK色彩模型？两者可以表示的颜色范围一样吗？
2. 高DPI屏幕（2K/4K）相比1080P屏幕，对于开发者来说有哪些需要注意的地方？
3. 可变字体相比传统字体有什么优势？会给网页排版带来什么变化？
4. 随着AVIF等新图像格式的普及，JPEG和PNG会被完全取代吗？为什么？

扩展阅读

书籍推荐

1. 《计算机图形学（第四版）》

   • 计算机图形学领域的经典教材
   • 系统讲解2D/3D图形渲染的基本原理和算法
   • 适合想要深入学习图形学的开发者

2. 《字体设计与排印》

   • 全面讲解字体设计和排版的基础知识
   • 适合前端、UI设计等需要和字体排版打交道的开发者阅读

3. 《色彩管理：色彩设计的方法与实践》

   • 讲解色彩理论和色彩管理的专业书籍
   • 帮助你理解色彩空间、伽马校正、校色等专业知识
   • 适合设计和前端开发人员阅读

在线资源

1. MDN Web Docs - 图形

   • MDN的图形开发指南，包含Canvas、SVG、WebGL等各种前端图形技术的详细文档
   • 前端图形开发的必备参考资料

2. Web.dev - 图像优化

   • Google官方的Web性能优化指南，图像优化部分非常详细
   • 包含各种图像格式选择、压缩、加载优化的最佳实践

3. Fonts Knowledge

   • Google Fonts提供的字体知识指南
   • 包含字体技术、网页字体最佳实践等内容

4. The Hitchhiker’s Guide to Digital Colour

   • 非常通俗易懂的数字色彩原理指南
   • 讲解了伽马校正、色彩空间等容易混淆的概念

工具推荐

1. Squoosh：https://squoosh.app/

   • Google开发的在线图像压缩工具，支持JPEG、PNG、WebP、AVIF等多种格式
   • 可以直观地对比压缩质量和文件大小，非常方便

2. Font Squirrel：https://www.fontsquirrel.com/tools/webfont-generator

   • 网页字体生成工具，可以将TTF/OTF字体转换为WOFF/WOFF2格式
   • 还支持字体子集化，大大减小字体文件大小

3. Can I Use：https://caniuse.com/

   • 查询各种Web技术的浏览器兼容性，包括图像格式、字体格式、CSS特性等
   • 做Web开发必备的工具

4. DisplayCAL：https://displaycal.net/

   • 开源的显示器校色工具，配合校色仪可以校准显示器的颜色，保证色彩准确
   • 适合设计、视频编辑等对色彩准确度要求高的用户

5. Figma：https://www.figma.com/

   • 在线UI设计工具，内置了丰富的字体、色彩、图形功能
   • 可以用来做设计、原型，也可以用来导出各种格式的图像

参考答案

练习题的参考答案可以在附录/练习题参考答案.md中找到。建议先独立思考完成，再查看答案。