2013-03-07 49 views
11

Vì vậy, tôi đã đọc một vài gợi ý với thẻ ngôn ngữ css, nhưng có vẻ như mọi thứ đều yêu cầu đặt ngôn ngữ trong thẻ nâng cao. Tôi không thể thay đổi các thẻ html xung quanh ngôn ngữ Hàn Quốc, nó có thẻ h1 giống như tiếng Anh. Đó là bởi vì nó là một phiên bản dịch của cùng một trang web.Thay đổi cỡ chữ Dựa trên ngôn ngữ

Tôi muốn có phông chữ và kích thước phông chữ khác cho phiên bản tiếng Hàn so với tiếng Anh. Tôi có thể làm điều này bằng cách chỉ biết ngôn ngữ? Tôi tìm thấy một số câu hỏi khác đối phó với phạm vi unicode sử dụng @ font-face {}, cho một, tôi không thể tìm ra những gì unicode phạm vi Hàn Quốc là, tôi đã cố gắng nhìn vào tất cả các tài liệu, nhưng tôi chỉ không hiểu làm thế nào unicode phạm vi được tính toán và viết. Ngoài ra, tôi đã hy vọng có một tùy chọn như,

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

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

Điều này có thể thực hiện được không?

Cảm ơn!

+0

có thể trùng lặp [Xác định kích thước phông chữ khác nhau cho mỗi phông chữ trong một họ phông chữ] (http://stackoverflow.com/questions/10153403/assigining-different-font-size-per-each-font-in -one-font-family) –

+0

Có nhiều câu hỏi khác nhau đối phó với cùng một chủ đề cơ bản, xem thêm ví dụ http://stackoverflow.com/questions/535616/can-css-choose-a-different-default-font-and-size-depending-on-language –

+0

câu hỏi của tôi là khác nhau, xem xét câu trả lời cho câu hỏi đó là tìm một phông chữ hoạt động trên tất cả các ngôn ngữ ... tiếng Hàn và tiếng Anh rất phong cách khác nhau và thiết kế khôn ngoan đòi hỏi phông chữ cụ thể – user1938107

Trả lời

12

Trong trường hợp của bạn thuộc tính lang được thiết lập trên thẻ html, vì vậy bạn có thể kiểu cho tất cả các yếu tố bạn cần dựa trên rằng việc sử dụng các quy tắc:

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

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

Hãy cẩn thận, tuy nhiên, các sự :lang pseudo-class chỉ được hỗ trợ trong IE8 +. Nếu bạn cần hỗ trợ trong IE7 +, đặt cược tốt nhất của bạn là sử dụng cú pháp kiểu này: a[lang="en"].

+0

để bạn nói rằng vì ngôn ngữ là tiếng Hàn, html sẽ tự động được đưa ra một thẻ html: lang (ko)? – user1938107

+0

Đó là cách trang web của bạn xử lý chuyển đổi ngôn ngữ. Tôi đã thử bản thân mình bằng cách sử dụng * công cụ dành cho nhà phát triển * để thêm các quy tắc đó và chúng hoạt động. Bạn có thể xem kiểm tra trang web của mình rằng thẻ '' (tức là trình bao bọc chính của mã của bạn) đang được thêm thuộc tính 'lang = en-US' hoặc' lang = ko-KR'. – Sunyatasattva

+0

tuyệt vời đã làm việc cảm ơn bạn – user1938107

4

Bạn có thể sử dụng lớp CSS :lang giả nếu bạn đặt thuộc tính lang trong HTML của mình để thay đổi kiểu. Ví dụ see demo hoặc đoạn mã sau:

CSS

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

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

HTML

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

trang web được viết bằng tiếng Anh, sau đó nó có một phiên bản được dịch mà là chính xác như nhau, ngoại trừ các từ được dịch sang tiếng Hàn. nếu tôi bọc bản gốc trong một thuộc tính lang, bản dịch tiếng Hàn sẽ có cùng thuộc tính lang, vì vậy tôi sẽ không thể tham khảo nó – user1938107

+0

Câu hỏi nói rằng việc sửa đổi đánh dấu HTML là không thể. –

+0

nó đang sử dụng wpml từ wordpress, www.sarahleejs.com là trang web thực tế nếu nó giúp ý nghĩa của những gì tôi đang nói về – user1938107

2

này có thể hữu ích: http://billposer.org/Linguistics/Computation/UnicodeRanges.html

Bạn đang tìm kiếm Hangul w Hích là "bảng chữ cái Hàn Quốc, hay còn gọi là Hangul, [nb 1] hoặc Chosongul"

Trân

+0

Câu hỏi đặt ra là sau một cách phân biệt. Đặt 'unicode-range' sẽ không cho phép bạn tạo kiểu cho dải ô cụ thể khác nhau. –

+0

nhờ liên kết, nó đã giúp một chút trong việc tìm kiếm phạm vi – user1938107

+0

Bạn có thể cung cấp css làm việc để làm cho câu trả lời thực sự hoàn chỉnh? – bjedrzejewski

0

Thay đổi style sheet trên ngôn ngữ chọn

<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

bạn có thể sử dụng một cái gì đó tương tự như:

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

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

hoặc nếu bạn muốn chỉ định lang="" một lần, thay vì trên tất cả các yếu tố, bạn có thể làm

#content[lang=en] h1 { 

} 

#content[lang=en] p { 

} 

#content[lang=kr] h1 { 

} 

#content[lang=kr] p { 

} 
+0

Điều này chỉ hoạt động nếu phần tử HTML có thuộc tính 'lang' được chỉ định. –

0

Nếu bạn đang sử dụng một số ngôn ngữ động làm phía máy chủ của trang web, bạn có thể chỉ cần tải CSS động dựa trên ngôn ngữ.

Ví dụ:bạn có, trong thư mục css, như sau:

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

Vì vậy, bạn có thể tách riêng các cài đặt chung khỏi ngôn ngữ cụ thể và có thể tải kiểu động theo yêu cầu một cách dễ dàng.

Nếu bạn có một trang HTML tĩnh thay vào đó, bạn có thể có hoạt Javascript để nạp CSS tự động hoặc bạn có thể sử dụng

:lang 

pseudo-class như chỉ bởi những người khác là tốt.

Bất kỳ giải pháp nào bạn chọn, hãy nhớ theo dõi khả năng tương thích với trình duyệt.

LƯU Ý: Thông thường, giải pháp tốt hơn là yêu cầu người dùng chọn ngôn ngữ ưa thích của mình một cách rõ ràng thay vì tự động đặt ngôn ngữ dựa trên thông tin hệ thống của khách hàng.

Các vấn đề liên quan