css - Google字体问题

我想给文本提供两个不同的字体系列，例如，如果有人在古吉拉特语中键入内容，则字体为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>

最佳答案

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

table td,table th{
  font-family: 'Roboto', sans-serif; /**for english**/
}
table td.guj,table th.guj{
  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 class="guj">સ્થળ નક્કી કરવું</td><td>Demo text</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
</table>

更新

您可以添加jQuery代码以测试内容是否为英语，然后添加类:

/* we suppose that english will only contain letter from a to z and numbers
   update if you want for example to consider special character, dots, quotes, etc */
var eng = /^[A-Za-z0-9]*$/;

$('td,th').each(function() {
  if (!eng.test($(this).text().replace(/\s/g, '')))
    $(this).addClass('guj');
});

table td,
table th {
  font-family: 'Roboto', sans-serif;/**for english**/
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>