根据语言CSS更改字体 [英] Change the font based on language CSS
问题描述
请检查此代码;我试图根据语言更改字体和文本对齐：
Please check this code; I am trying to change the font and text-align based on language :
样式
<style>
.quotebod {
padding: 10px 10px 10px 10px;
line-height: 22px;
font-size: 20px;
}
:lang(ar) {
text-align:right;
font-family:'Droid Arabic Kufi';
}
.quotebod:lang(ar) {
padding: 10px 10px 10px 10px;
line-height: 30px;
font-size: 20px;
text-align:right;
font-family:'Droid Arabic Kufi';
}</style>
<body><p class="quotebod">{Quote}</p></body>
** {Quote}：tumblr变量，但它也是文本**
**{Quote}: a tumblr variable but it's text too **
推荐答案
在同一页面中使用不同语言的文本是很好的。通常在这种情况下，很容易确定HTML的主要语言;该语言应在< html> 元素的 lang 属性中使用。接下来，为包含用不同语言编写的文本的每个元素添加 lang 。
It's quite fine to have texts in different languages in the same page. Usually in this case it's easy to determine the 'main' language of the HTML; that language should be used in lang attribute of <html> element. Next, you add lang for each element containing text written in different language.
，其他是RTL，它也很好指定 dir 属性，以及相同的方法。例如：
In case when one language is LTR, and other is RTL, it's also good to specify dir attribute as well, following the same approach. For example:
<html lang="ar" dir="rtl">
<head>
</head>
<body>
<p>«فى هذا الكتاب مقارنة بين تعاليم الإسلام كما وصلت إلينا، وبين أصدق ما وصلت إليه حضارة الغرب فى أدب النفس والسلوك فى محاولة للكشف عن روعة التقارب وصدق التطابق»</p>
<p lang="en" dir="ltr"> These are some of the words of the author, which cross them about the reason for writing this unique work</p>
<p>.. هذه بعض كلمات المؤلف التى عبر بها عن سبب كتابته لهذا العمل الفريد، خاصة بعد قراءته لكتاب «دع القلق وابدأ الحياة» لديل كارنيجى وقد اعتمد فى هذا العمل على جانبين رئيسين.</p>
</body>
</html>
您可以使用，轻松调整每个单独元素的样式：lang selector。请注意，一旦设置在 html 上，它将被所有元素继承 - 除非直接覆盖。
You can easily adjust styling of each separate element by using :lang selector. Take note that once set up on html, it'll be inherited by all the elements - unless overwritten directly.
因此，在上面的文档中， p：lang（ar）选择器将同时应用于第一个和第三个段落 - 但不是第二个。
So in the document above, p:lang(ar) selector will be applied both the first and the third paragraphs - but not to the second one.
现在问题。假设我们有一个可能包含阿拉伯语或英语文本的元素。你可能已经猜到，只是改变文本本身是不够的 - 你也可以相应地调整 lang 属性的元素。例如：
Now to the question. Let's say we have an element that might contain text in either Arabic or English. You might've guessed already that it's not enough just to change the text itself - you'd also adjust accordingly lang attribute of that element. For example:
// here goes the code that receives the quotation
<p class="quotebod" lang="{Quote.lang}" dir="{Quote.dir}">{Quote}</p>
困难的部分是通过报价检测语言。我想这是很容易做的源，但你可以通过分析 Quote - 如果他们包含阿拉伯字母表符号的内容，在客户端，他们几乎没有英语 - 反之亦然。
The hard part would be detecting the language by the quote. I suppose that's easy to do at the source, but you can do it the client-side as well by analyzing the contents of Quote - if they contain symbols from the Arabic alphabet, they're hardly in English - and vice versa.
例如，我们有一个包含浅层结构中不同类型文本的HTML - 每个段落包含一个阿拉伯语或英语文本块。下面是我们如何分配 lang 和 dir 属性：
For example, let's say we have an HTML containing different types of text in a shallow structure - each paragraph contains a block of text in either Arabic or English. Here's how we can assign lang and dir attributes accordingly:
var arabicPatt = /[\u0600-\u06ff]/;
[].forEach.call(document.getElementsByTagName('p'), function(p) {
var lang, dir;
if (arabicPatt.test(p.textContent)) {
lang = 'ar'; dir = 'rtl';
}
else {
lang = 'en'; dir = 'ltr';
}
p.setAttribute('lang', lang);
p.setAttribute('dir', dir);
});
Demo 。注意，我没有在CSS中设置 text-align：right - 这是由浏览器一旦元素收到相应的 dir value。
Demo. Note that I didn't set up text-align: right in CSS - it was done by the browser once the elements received corresponding dir value.
这篇关于根据语言CSS更改字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
