谷歌字体问题

Question

我想给两个不同的font-family文本，如果有人输入Gujarati然后字体是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元素为目标。 相反，您可以将类用于非英语文本，并使英语成为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> 

UPDATE

您可以添加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>