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

Question

我在我的网站上使用了数据表导出按钮 (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');
}

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

Answer 1

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

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

不需要 .dt-button 样式中的 src。

此外，您在字体路径中有一个额外的 space：

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

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

How to change the font family of jquery datatables export buttons

css

datatables

webfonts