更改基於語言的字體大小

因此，我已閱讀了一些有關css語言標記的建議，但似乎所有內容都需要將語言標記在高級標記中。我無法改變韓文語言的html標籤，它與英文標籤具有相同的h1標籤。這是因爲它是同一網站的翻譯版本。更改基於語言的字體大小

我想爲韓文版本使用不同的字體和字體大小，而不是英文。我能否通過了解語言來做到這一點？我發現一些其他問題涉及使用@ font-face {}的unicode範圍，我無法弄清楚韓文是什麼unicode範圍，我試着查看所有文檔，但我不知道如何計算unicode範圍和書面。此外，我希望有一個選項，如

h1{ 
unicode-range: korean; 
font-size: 10px; 
} 

h1{ 
unicode-range: english; 
font-size 20px; 
}

可以這樣做嗎？

謝謝！

來源

2013-03-07 user1938107

可能的重複[指定一種字體系列中每種字體的不同字體大小]（http://stackoverflow.com/questions/10153403/assigining-different-font-size-per-each-font-in -one-font-family） – 2013-03-07 09:33:19

處理同一個基本主題有各種各樣的問題，另請參閱eg http://stackoverflow.com/questions/535616/can-css-choose-a-different-default-font-and-size-depending-on-language – 2013-03-07 09:34:43

我的問題是不同的，考慮到答案是找到一種字體適用於所有語言......韓語和英語是非常不同的風格和設計明智需要特定的字體 – user1938107 2013-03-07 09:39:58

在你的情況lang屬性被設置在html標籤，所以你可以樣式的所有你需要基於該使用規則的元素：

html:lang(en) h1{ 
    font-size: 20px; 
} 

html:lang(ko) h1{ 
    font-size: 10px; 
}

要小心，雖然，在:lang僞類僅在IE8 +中受支持。如果您在IE7 +中需要支持，最好的選擇是使用這種類型的語法：a[lang="en"]。

來源

2013-03-07 09:34:15 Sunyatasattva

所以你說這是因爲語言是韓文的html會自動給出一個html：lang（ko）標籤？ – user1938107 2013-03-07 09:45:26

這就是你的網站如何處理語言切換。我嘗試使用*開發者工具*來添加這些規則，並且他們工作。你可以看到檢查你的網站時，''標籤（即你的代碼的主包裝）被添加了'lang = en-US'或'lang = ko-KR'屬性。 – Sunyatasattva 2013-03-07 09:47:33

真棒，工作謝謝你 – user1938107 2013-03-07 09:47:52

如果您在HTML中設置lang屬性以更改樣式，則可以使用CSS :lang僞類。例如see demo或下面的代碼：

CSS

:lang(en) { 
    font-size:20px; 
} 

:lang(fr) { 
    font-size:10px; 
}

HTML

<p lang="en">Lorem</p> 
<p lang="fr">Lorem</p>

來源

2013-03-07 09:28:43 andyb

該網站是用英文寫成的，然後它的翻譯版本完全一樣，只是這些文字被翻譯成韓文。如果我用lang屬性包裝原始文件，韓文翻譯將具有相同的lang屬性，所以我不能引用它 – user1938107 2013-03-07 09:31:14

問題指出修改HTML標記是不可能的。 – 2013-03-07 09:31:24

它使用wordpress的wpml，www.sarahleejs.com是真正的網站，如果它有助於理解我在說什麼 – user1938107 2013-03-07 09:32:56

這可能會有所幫助：http://billposer.org/Linguistics/Computation/UnicodeRanges.html

您正在尋找韓文 w^HICH是「韓語字母，也被稱爲朝鮮文，[注1]或Chosongul」

問候

來源

2013-03-07 09:30:00

問題在於區分方式。設置'unicode-range'將不允許你以不同的方式設置特定範圍。 – 2013-03-07 09:32:10

感謝您的鏈接，它有助於找到範圍 – user1938107 2013-03-07 09:51:00

您是否可以提供工作CSS以使答案真正完成？ – bjedrzejewski 2013-03-07 09:51:14

更改樣式表語言選擇

<body onload="set_style_from_cookie()"> 

//style sheet 
<link rel="stylesheet" type="text/css" title="korean" 
    href="http://example.com/css/korean.css"> 
<link rel="alternate stylesheet" type="text/css" title="english" 
    href="http://example.com/css/english.css"> 

//form to select language using button 
<form> 
<input type="submit" 
    onclick="switch_style('korean');return false;" 
    name="theme" value="korean Language" id="korean"> 
<input type="submit" 
    onclick="switch_style('english');return false;" 
    name="theme" value="english language" id="english"> 
</form> 

//javascript 
<script> 
// *** TO BE CUSTOMISED *** 

var style_cookie_name = "style" ; 
var style_cookie_duration = 30 ; 

// *** END OF CUSTOMISABLE SECTION *** 

function switch_style (css_title) 
{ 

    var i, link_tag ; 
    for (i = 0, link_tag = document.getElementsByTagName("link") ; 
    i < link_tag.length ; i++) { 
    if ((link_tag[i].rel.indexOf("stylesheet") != -1) && 
     link_tag[i].title) { 
     link_tag[i].disabled = true ; 
     if (link_tag[i].title == css_title) { 
     link_tag[i].disabled = false ; 
     } 
    } 
    set_cookie(style_cookie_name, css_title, 
     style_cookie_duration); 
    } 
} 
function set_style_from_cookie() 
{ 
    var css_title = get_cookie(style_cookie_name); 
    if (css_title.length) { 
    switch_style(css_title); 
    } 
} 
function set_cookie (cookie_name, cookie_value, 
    lifespan_in_days, valid_domain) 
{ 

    var domain_string = valid_domain ? 
         ("; domain=" + valid_domain) : '' ; 
    document.cookie = cookie_name + 
         "=" + encodeURIComponent(cookie_value) + 
         "; max-age=" + 60 * 60 * 
         24 * lifespan_in_days + 
         "; path=/" + domain_string ; 
} 
function get_cookie (cookie_name) 
{ 

    var cookie_string = document.cookie ; 
    if (cookie_string.length != 0) { 
     var cookie_value = cookie_string.match (
         '(^|;)[\s]*' + 
         cookie_name + 
         '=([^;]*)'); 
     return decodeURIComponent (cookie_value[2]) ; 
    } 
    return '' ; 
} 
</script>

來源

2013-03-07 09:30:06

你可以使用類似的東西：

h1[lang=en] { 
    font-size: 10px; 
} 

h1[lang=kr] { 
    font-size: 14px; 
}

，或者如果你想只指定lang=""一次，而不是每元素，你可以做

#content[lang=en] h1 { 

} 

#content[lang=en] p { 

} 

#content[lang=kr] h1 { 

} 

#content[lang=kr] p { 

}

來源

2013-03-07 09:31:08 bizzehdee

這隻有在HTML元素具有指定的'lang'屬性時纔有效。 – 2013-03-07 09:32:31

如果您使用一些動態語言作爲網站的服務器端，您可以簡單地根據語言環境進行動態CSS加載。

E.g.你已經在css文件夾，如下：

style.css  // this is the default 
style_en_US.css 
style_ko_KR.css

所以，你可以有全局設置從區域設置特定的人的分離，並能輕鬆動態加載所需的風格。

如果你有一個靜態的HTML頁面，而不是，你可以有JavaScript動態加載CSS或者您可以使用

:lang

僞類被別人當作指出爲好。

無論您選擇哪種解決方案，請記住要注意瀏覽器兼容性。

注意：通常，讓用戶明確選擇其首選語言環境而不是根據客戶端系統信息自動設置一個更好的解決方案。

來源

2013-03-07 09:35:30 Powerslave

更改基於語言的字體大小

回答

相關問題