html - 如何使英文文本与日文文本显示相同的大小？

问题描述

我的网站包括英文和日文字符。问题在于，虽然它们是在同一个类中定义的，但在某些环境中它们看起来好像是不同的大小。例如，它在我的笔记本电脑上的 Chrome 浏览器上看起来很好，但在我的桌面上的 Chrome 浏览器和我的iphone的 Safari 浏览器上，英文文本看起来比日文文本小。

下面是我的代码片段：

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

p,
fieldset,
table {
  /*so things don't run into each other*/
  margin-bottom: 1em;
}

* {
  font-size: 14px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 5px;
}

#container-right {
  width: 490px;
  float: right;
}

p {
  font-family: Libre Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 20px;
  font-display: block;
  vertical-align: top;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "html://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="css.css" media="screen, projection, print" />
  <link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" />
</head>

<body>

  <div id="container-right">
  
    <p>Brown准教授、&lt;/p>
    </div>
  </body>

</html>

将日文字符更改为不同的、特定于日文的 p 样式没有任何影响。html 文件的语言设置为“ja”，但将其更改为英语也没有影响。

请帮忙！

真诚的花子

标签： htmlcsscjk

解决方案

解决方案 1

选择同时支持英文和日文文本的字体。这样，您的文本将始终与文本的高度相同。但是，这些字体的英文可能相当难看。

解决方案 2

以下步骤假设日语是您页面上的主要语言，英语是次要语言。如果相反，则颠倒下面的说明。

确保将日文和英文字体加载到 CSS/HTML 中。例如，从
1. https://fonts.google.com/
2. https://fonts.adobe.com/
3. 您自己的字体使用https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts#web_fonts
将所有英文文本包装在<span class="english-text"></span>.
对于您的整体文本，将您的字体系列设置为您的日文字体。
对于您的.english-text班级，将您的字体系列设置为您的英文字体。
手动选择字体大小以匹配英语和日语。

解释

这个问题是因为浏览器无法从您的font-family属性中找到匹配的字体来呈现日语文本。在我的 Windows Chrome 计算机上，Chrome 将英文文本呈现为Garamond但日文文本呈现为Yu Gothic.

似乎当 Chrome（可能还有其他浏览器）时，尽管明确指定font-size: 14px，Chrome 会为不同的字体选择合适的字体大小。

要在 Chrome 上查看某些文本的渲染字体，

检查文本（通过右键单击并在上下文菜单中选择检查）
转到“计算”样式选项卡。
滚动到底部以查看“渲染字体”。

html - 如何使英文文本与日文文本显示相同的大小？

问题描述

解决方案

推荐阅读