如何更改 jquery 数据表导出按钮的字体系列答案

【问题标题】：How to change the font family of jquery datatables export buttons如何更改 jquery 数据表导出按钮的字体系列
【发布时间】：2017-07-17 13:33:02
【问题描述】：

我在我的网站上使用了数据表导出按钮 (https://datatables.net/extensions/buttons/examples/html5/simple.html)。
但是在我的网站中，我使用的是自定义字体系列。在我的主要 css 中，代码如下：

@font-face {
    font-family: MyFontCapital;
    src: url('../font/MyFontCapital.otf'); 
}
@font-face {
    font-family: MyFontSansRegular;
    src: url('../font/MyFontSans-Regular.otf'); 
}
@font-face {
    font-family: MyFontSansMedium;
    src: url('../font/ MyFontSans-Medium.otf'); 
}

而我使用的css文件如下：

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="css/plugins/dataTables/buttons.dataTables.min.css" rel="stylesheet">

而附加的js文件如下：

<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/plugins/dataTables/dataTables.buttons.min.js"></script>
<script src="js/plugins/dataTables/buttons.flash.min.js"></script>
<script src="js/plugins/dataTables/jszip.min.js"></script>
<script src="js/plugins/dataTables/pdfmake.min.js"></script>
<script src="js/plugins/dataTables/vfs_fonts.js"></script>
<script src="js/plugins/dataTables/buttons.html5.min.js"></script>
<script src="js/plugins/dataTables/buttons.print.min.js"></script>

我想更改导出按钮使用的字体（CSV、Excel、PDF、打印）

我尝试在我的主 css 上添加代码：

.dt-button {
  font-family: MyFontCapital;
  src: url('../font/MyFontCapital.otf');
}

或

.dt-button-collection{
  font-family: MyFontCapital;
  src: url('../font/MyFontCapital.otf');
}

但是没有用。我还搜索了数据表站点，但没有找到任何在数据表初始化期间设置字体系列的示例。知道我应该怎么做吗？

【问题讨论】：

本地找不到您的字体。确定@font-face 可以找到他们吗？从dt-button.. 类中删除src，因为它是@font-face 特定属性，所以无论如何都不起作用。
@RenevanderLende font-face 可以找到它们。我删除了 src 但按钮看不到特定的字体。
我对@font-face 不太熟悉，但是本地和远程url() 是有区别的，所以你可能想看看stackoverflow.com/questions/3698319/…。
此字体是否应用于您网页中的其他元素？
@MajidBasirati 是的，这些字体应用在我网页的几个元素中

标签： css datatables webfonts

【解决方案1】：

使您的样式定义更重要，例如

.dt-button {
  font-family: MyFontCapital !important;
}

不需要 .dt 按钮样式中的 src。

另外，你在字体路径中有一个额外的空间：

    font-family: MyFontSansMedium;
    src: url('../font/ MyFontSans-Medium.otf');

【讨论】：