2013-03-07 4 views
11

Итак, я прочитал несколько предложений с тегом языка css, но кажется, что все требует размещения языка в теге в расширенном. Я не могу изменить теги html вокруг корейского языка, он имеет тот же тег h1, что и английский. Это потому, что это переведенная версия одного и того же веб-сайта.Изменение размера шрифта на основе языка

Я хочу иметь другой шрифт и размер шрифта для корейской версии, чем английский. Могу ли я сделать это, просто зная язык? Я нашел несколько других вопросов, связанных с диапазоном Unicode, который использовал @ font-face {}, для одного, я не могу понять, что такое юникодный диапазон на корейском языке, я пробовал посмотреть всю документацию, но я просто не понимаю, как рассчитываются диапазоны Unicode и написано. Кроме того, я надеялся, что существует такой вариант, как:

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

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

Это можно сделать?

Спасибо!

+0

Возможный дубликат [Присвоение разных шрифтов по каждому шрифту в одном семействе шрифтов] (http://stackoverflow.com/questions/10153403/assigining-different-font-size-per-each-font-in -one-font-family) –

+0

Существуют различные вопросы, касающиеся одной и той же основной темы, см. также, например, http://stackoverflow.com/questions/535616/can-css-choose-a-different-default-font-and-size-depending-on-language –

+0

У меня вопрос другой, учитывая, что на него был найден один шрифт который работает на всех языках ... корейский и английский очень разные стили, а дизайн мудрый требует определенных шрифтов – user1938107

ответ

12

В вашем случае атрибут lang устанавливается на html тега, так что вы можете стилизовать все элементы, необходимые на основе того, что с помощью правил:

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

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

Будьте осторожны, хотя, тем :lang pseudo-class поддерживается только в IE8 +. Если вам нужна поддержка в IE7 +, ваш лучший выбор подходит для синтаксиса этого типа: a[lang="en"].

+0

так что вы говорите, что, поскольку язык является корейским, html автоматически присваивается тег html: lang (ko)? – user1938107

+0

Вот как ваш сайт управляет переключением языков. Я попытался использовать * инструменты для разработчиков *, чтобы добавить эти правила, и они работают. Вы можете увидеть, как ваш веб-сайт проверяет, что тег '' (т. Е. Основная оболочка вашего кода) добавляется атрибут 'lang = en-US' или' lang = ko-KR'. – Sunyatasattva

+0

потрясающий, который сработал спасибо – user1938107

4

Вы можете использовать псевдокласс класса CSS :lang, если вы установите атрибут lang в свой HTML, чтобы изменить стиль. Например see demo или следующий код:

CSS

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

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

HTML

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

веб-сайт написан на английском языке, он имеет переведенную версию, которая точно такая же, за исключением того, что слова переводятся на корейский язык. если я обернуть оригинал в атрибуте lang, то корейский перевод будет иметь тот же атрибут lang, поэтому я не смогу ссылаться на него. – user1938107

+0

В вопросе говорится, что изменение разметки HTML невозможно. –

+0

использует wpml from wordpress, www.sarahleejs.com - это фактический веб-сайт, если он помогает понять, о чем я говорю. – user1938107

2

Это может быть полезно: http://billposer.org/Linguistics/Computation/UnicodeRanges.html

Вы ищете хангыль вес HICH является «Корейский алфавит, известный также как хангыль, [нб 1] или Chosongul»

С уважением

+0

Вопрос - это способ дифференцирования. Установка 'unicode-range' не позволит вам настроить этот конкретный диапазон по-разному. –

+0

спасибо за ссылку, это немного помогло найти диапазон – user1938107

+0

Не могли бы вы предоставить рабочий css, чтобы сделать ответ действительно полным? – bjedrzejewski

0

Изменение таблицы стилей на языке выберите

<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> 
0

вы могли бы использовать что-то подобное:

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 { 

} 
+0

Это работает, только если элемент HTML имеет атрибут 'lang'. –

0

Если вы используете какой-либо динамический язык в качестве серверной части вашего сайта, вы можете просто выполнить динамическую загрузку CSS в зависимости от локали.

E.g.вы, в папке CSS, следующее:

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

Таким образом, вы можете иметь разделение глобальных параметров от локализованных установок, и может загрузить нужный стиль динамически с легкостью.

Если у вас есть статический HTML страницы вместо этого, вы можете иметь JavaScript для загрузки CSS динамически или вы можете использовать

:lang 

псевдо-класс, как указывал на других.

Независимо от выбранного вами решения, не забудьте следить за совместимостью с браузером.

ПРИМЕЧАНИЕ. Часто это лучшее решение, позволяющее пользователю явно выбрать его/ее предпочтительную локаль вместо автоматической установки на основе системной информации клиента.

Смежные вопросы