谷歌字体问题

Question

我想给两个不同的字体系列文本,如果有人输入古吉拉特语然后字体是Mukta Vani和英语然后字体是roboto.可能吗..？如果有人知道那么请帮助我.

table{
  font-family: 'Roboto', sans-serif; /**for english**/
}
table td{
  font-family: 'Mukta Vaani', sans-serif; /**Only for gujarati**/
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/css?family=Mukta+Vaani:400,500&amp;subset=gujarati" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

<table class="table grid-table table-striped  table-hover ">
  <tr><th>Title</th><th>description</th></tr>  
  <tr><td>???? ????? ?????</td><td>Demo text</td></tr> 
  <tr><td>Test</td><td>Test</td></tr> 
</table>

Answer 1

将始终应用第二种字体样式。它比第一个更具体，td因为它针对的是元素。相反，您可以对非英语文本使用 class 并将英语设置为td.

\n\n

\r\n

\r\n

table td,table th{\r\n  font-family: \'Roboto\', sans-serif; /**for english**/\r\n}\r\ntable td.guj,table th.guj{\r\n  font-family: \'Mukta Vaani\', sans-serif; /**Only for gujarati**/\r\n}

\r\n

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\r\n\r\n<link href="https://fonts.googleapis.com/css?family=Mukta+Vaani:400,500&amp;subset=gujarati" rel="stylesheet">\r\n<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> \r\n\r\n<table class="table grid-table table-striped  table-hover ">\r\n  <tr><th>Title</th><th>description</th></tr>  \r\n  <tr><td class="guj">\xe0\xaa\xb8\xe0\xab\x8d\xe0\xaa\xa5\xe0\xaa\xb3 \xe0\xaa\xa8\xe0\xaa\x95\xe0\xab\x8d\xe0\xaa\x95\xe0\xab\x80 \xe0\xaa\x95\xe0\xaa\xb0\xe0\xaa\xb5\xe0\xab\x81\xe0\xaa\x82</td><td>Demo text</td></tr> \r\n  <tr><td>Test</td><td>Test</td></tr> \r\n</table>

\r\n

\r\n

\r\n

\n\n

更新

\n\n

您可以添加 jQuery 代码来测试内容是否是英文，然后添加类：

\n\n

\r\n

\r\n

/* we suppose that english will only contain letter from a to z and numbers\r\n   update if you want for example to consider special character, dots, quotes, etc */\r\nvar eng = /^[A-Za-z0-9]*$/;\r\n\r\n$(\'td,th\').each(function() {\r\n  if (!eng.test($(this).text().replace(/\\s/g, \'\')))\r\n    $(this).addClass(\'guj\');\r\n});

\r\n

table td,\r\ntable th {\r\n  font-family: \'Roboto\', sans-serif;/**for english**/\r\n}\r\n\r\ntable td.guj,\r\ntable th.guj {\r\n  font-family: \'Mukta Vaani\', sans-serif; /**Only for gujarati**/\r\n  color: red;\r\n}

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\r\n\r\n<link href="https://fonts.googleapis.com/css?family=Mukta+Vaani:400,500&amp;subset=gujarati" rel="stylesheet">\r\n<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> \r\n\r\n<table class="table grid-table table-striped  table-hover ">\r\n  <tr><th>Title</th><th>description</th></tr>  \r\n  <tr><td >\xe0\xaa\xb8\xe0\xab\x8d\xe0\xaa\xa5\xe0\xaa\xb3 \xe0\xaa\xa8\xe0\xaa\x95\xe0\xab\x8d\xe0\xaa\x95\xe0\xab\x80 \xe0\xaa\x95\xe0\xaa\xb0\xe0\xaa\xb5\xe0\xab\x81\xe0\xaa\x82</td><td>Demo text</td></tr> \r\n  <tr><td>Test</td><td>Test</td></tr> \r\n</table>

\r\n

\r\n

\r\n

\n