如何在网页上正确呈现土耳其字母（拉丁语扩展-A？）？答案

【问题标题】：How to render Turkish letters (Latin Extend-A?) correctly on web page?如何在网页上正确呈现土耳其字母（拉丁语扩展-A？）？
【发布时间】：2014-03-19 00:03:45
【问题描述】：

我们正在将我们的网站本地化为土耳其语。但不知何故，一些重音字母无法正确显示。它们似乎比其他字母更粗体。请看截图。

我们正在使用 Rails。这是页面的源代码：

<span id="page"></span>
<div class="article_container">

<div class="main_col_fluid article">
    <div class="module" itemscope itemtype="http://schema.org/Article">
<div id="breadcrumb" class="breadcrumb superfluous">
<a href='/turkey/tr'>Anasayfa</a><span class='divider'> › </span><a href='/turkey/tr/world'>Dünya</a><span class='divider'> › </span><a href='/turkey/tr/world/asia-pacific'>Asya Pasifik</a>
</div>

<div class="intro">
<div class="meta_wrapper">
    <span class="meta date" itemprop="datePublished">28 Şubat 2014, Cuma</span>
</div>
<h1 itemprop="name">Temel Misyonumuz</h1>
<div class="meta_wrapper">
    <span class="meta source" itemprop="author">Abdulla al Gurg, Al Gurg Group</span>
</div>
<hr>
<div class="strapline" itemprop="description">
    <p>Nissan Leaf&#x27;in arka kapısındaki siyah camlar bu pilli-elektrikli arabada farklı bir şeyler olduğunun ilk ipucu. Yan tarafına yazılmış “Otonom Sürüş” kelimeleri ise durumu daha iyi anlatıyor.</p>
</div>
<ul class="actions">
<li class="share">
<a href="http://www.addthis.com/bookmark.php" class="addthis_button no-lightbox">
    <span class="icon"></span> Paylaş <span class="icon arrow"></span>
</a>
</li>
<li class="print superfluous">
<a href="#">
    <span class="icon"></span> Yazdır
</a>
</li>
</ul>
</div>

<div class="media">
</div>

<div class="content" itemprop="articleBody"><p>Temel Misyonumuz, bilimsel donanım ve anlayışa sahip, &ccedil;ağdaş, demokrat, &uuml;retken, &uuml;lke ve d&uuml;nya sorunlarına duyarlı, yeniliklere a&ccedil;ık, değişen koşullara uyum g&ouml;sterebilen, geleceğe y&ouml;nelik hedefleri olan, grup i&ccedil;inde &ccedil;alışmayı bilen, liderlik ve iletişim becerilerine sahip, modern eğitim-&ouml;ğretim ve bilgi-iletişim teknolojilerini kullanabilen, farklı bilim dalları arasında ilişki kurabilen ve bilgilerini farklı alanlara uygulayabilen/yansıtabilen, k&uuml;lt&uuml;re ve sanata duyarlı, &ccedil;eşitliliği bir zenginlik olarak algılayan, teori ile uygulamayı birleştirebilen, &ouml;zg&uuml;veni ve hoşg&ouml;r&uuml;s&uuml; olan, yaşam boyu &ouml;ğrenmeyi ve kendini yenilemeyi ilke edinmiş, kendisiyle ve &ccedil;evresiyle barışık, profesyonel ve mesleğine adanmış, eleştirel, yansıtıcı ve yaratıcı d&uuml;ş&uuml;nme ile karar verme ve problem &ccedil;&ouml;zme becerilerine sahip, d&uuml;ş&uuml;ncelerini &ouml;zg&uuml;rce ifade edebilen &ouml;ğretmenler yetiştirmektir.</p>

<p>Eğitim ve &ouml;ğretimle ilgili ulusal ve uluslararası d&uuml;zeyde kuramsal ve uygulamalı bilimsel araştırma ve projelerin yanı sıra kongre, seminer, sempozyum, panel ve &ccedil;alıştaylar d&uuml;zenleyerek sonu&ccedil;larının geniş kitlelere ulaşmasını ve uygulamalar &uuml;zerinde etkili olmasını sağlamak; eğitim ve &ouml;ğretimle ilgili faaliyette bulunan resmi ve &ouml;zel, yerel, ulusal ve uluslararası kurumlarla işbirliği yaparak hem onların imkan ve tecr&uuml;belerinden yararlanmak hem de s&ouml;z konusu kurumların gelişmelerine katkıda bulunmak ise fak&uuml;ltemizin diğer &ouml;nceliklerini oluşturmaktadır.</p>
</div>

按照this post的建议，我已经尝试过了

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

还有

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,latin-ext" media="all" rel="stylesheet" type="text/css" />

但似乎都没有帮助。

你建议如何解决这个问题？谢谢。

【问题讨论】：

该问题缺少实际使用 Roboto（或 Open Sans）的代码。 link 元素只是定义它以供使用。
在屏幕截图中，字母 ı、ş、ç、ğ 看起来不错。仅在复制文本之前的类似标题的文本中存在问题，尺寸较大。您需要显示实际重现该问题的 CSS 代码。

标签： html ruby-on-rails localization stylesheet

【解决方案1】：

谜团已经解开。我们正在使用从 fonts.com 购买的自定义字体。显然，我们购买的这种字体不包含拉丁语 Extend-A 字符。任何缺失的字形都使用系统字体（可能是 Mac 上的 Helvetica）呈现，因此缺失的字符看起来很粗体。

解决办法是重新下载包含拉丁语Extend-A字符的字体。

【讨论】：