56 lines
3.8 KiB
Plaintext
56 lines
3.8 KiB
Plaintext
---
|
||
title: 设计或开发多语言网站时，您必须注意哪些事项？
|
||
---
|
||
|
||
设计和开发多语言网站是国际化 (i18n) 的一部分。
|
||
|
||
## 搜索引擎优化
|
||
|
||
* 在 `<html>` 标签上使用 `lang` 属性。
|
||
* 在 URL 中包含语言区域设置（例如 en\_US、zh\_CN 等）。
|
||
* 网页应使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 告诉搜索引擎在指定的 `href` 处有另一个页面，其内容相同，但针对另一种语言/语言区域设置。
|
||
* 为不匹配的语言使用后备页面。使用“x-default”值：`<link rel="alternate" href="url_for_fallback" hreflang="x-default" />`。
|
||
|
||
## 了解语言区域设置与语言的区别
|
||
|
||
语言区域设置控制数字、日期和时间的显示方式，适用于您的地区：这可能是一个国家/地区，或一个国家/地区的一部分，甚至可能不遵守国家/地区的边界。
|
||
|
||
## 语言可能因国家/地区而异
|
||
|
||
某些语言，尤其是使用广泛的语言，在不同的国家/地区有不同的“风格”（语法规则、拼写、字符）。区分目标国家/地区的语言非常重要，不要假设/强制所有使用该语言的国家/地区都使用该语言的一个国家/地区的版本。示例：
|
||
|
||
* `en`：`en-US`（美式英语）、`en-GB`（英式英语）
|
||
* `zh`：`zh-CN`（简体中文）、`zh-TW`（繁体中文）
|
||
|
||
## 预测语言区域设置，但不要限制
|
||
|
||
服务器可以通过 HTTP `Accept-Language` 标头和 IP 地址的组合来确定访问者的语言区域设置/语言。有了这些，服务器可以自动为访问者选择最佳语言区域设置。但是，预测并非万无一失（尤其是当访问者使用 VPN 时），并且应允许访问者轻松更改其国家/地区/语言，而不会遇到麻烦。
|
||
|
||
## 考虑不同语言的文本长度差异
|
||
|
||
用另一种语言书写时，某些内容可能会更长。在设计中要注意布局或溢出问题。最好避免设计文本量会破坏设计的场景。字符计数会影响标题、标签和按钮等内容。对于自由流动的文本（如正文或评论），它们的影响较小。例如，某些语言（如德语和法语）往往比英语使用更长的单词和句子，如果不考虑这一点，可能会导致布局问题。
|
||
|
||
## 语言阅读方向
|
||
|
||
英语和法语等语言是从左到右、从上到下书写的。但是，希伯来语和阿拉伯语等某些语言是从右到左书写的。这会影响您网站的布局和页面上元素的位置，因此您必须小心设计您的网站，以适应不同的文本方向。
|
||
|
||
## 不要连接翻译后的字符串
|
||
|
||
不要做类似 `"今天的日期是 " + date` 的事情。它会在单词顺序不同的语言中中断。改为对每种语言使用带有参数替换的模板字符串。例如，分别查看英语和中文的以下两句话：`I will travel on {% date %}` 和 `我会在{% date %}出发`。请注意，由于该语言的语法规则，变量的位置不同。
|
||
|
||
## 格式化日期和货币
|
||
|
||
日历日期有时以不同的方式呈现。例如，美国为“2012 年 5 月 31 日”，而欧洲部分地区为“2012 年 5 月 31 日”。
|
||
|
||
## 不要将文本放在图片中
|
||
|
||
将文本放在基于栅格的图像（例如 png、gif、jpg 等）中不是一种可扩展的方法。将文本放在图像中仍然是一种在任何计算机上显示美观的非系统字体的常用方法。但是，为了支持图像文本翻译成其他语言，需要为每种语言创建单独的图像，这对于设计师来说不是一个可扩展的工作流程。
|
||
|
||
## 注意颜色是如何被感知的
|
||
|
||
颜色在不同的语言和文化中被感知的方式不同。设计应适当使用颜色。
|
||
|
||
## 参考资料
|
||
|
||
* [区域设置和语言之间的差异](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
|