无法使用webpack＆amp ;;加载字体vuejs

Question

我在vuejs上的字体效率有些麻烦，我没有任何错误，我的字体在好文件夹中，我的webpack配置似乎很有效。

顺便说一下，我使用的更少，但我也有更少的装载机。

这是我的工作方式：

    $scope.dimAt1EditActionRecommendedByLerSelections = function () {
            console.log("In dimAt1EditActionRecommendedByLerSelections");
            console.log("Length: " + $scope.data.editAction.actionType1.actionsRecommendedByLer.length);
            $timeout(function() {
                var element;
                for (i = 0; i < $scope.data.editAction.actionType1.actionsRecommendedByLer.length; i++) {
                    console.log("i: " + i);
                    console.log("id: " + $scope.data.editAction.actionType1.actionsRecommendedByLer[i].lookUpDetailId);
                    element = $('#editActionRecommendedByLerSelect option[value = "' + $scope.data.editAction.actionType1.actionsRecommendedByLer[i].lookUpDetailId + '"]');
                    element.attr('disabled', 'disabled');
                    element.css('background-color', 'yellow');
                }
            }, 1000);
        }

这是我在webpack.config中定义url-loader的地方：

@font-face {
  font-family: 'montserrat-extralight';
  src: url('../assets/fonts/montserrat-ExtraLight.ttf') format('truetype');
  font-family: 'montserrat-light';
  src: url('../assets/fonts/montserrat-Light.ttf');
}

我发现很多人遇到同样的问题，但我实际上找不到让它发挥作用的方法。

PS：我的字体未在开发者模式中的网络标签中上传...

Answer 1

您的配置似乎没问题，但尝试删除限制参数可能会解决您的问题，因为字体文件可能会超出100K。

Answer 2

好的，我最终找到了一种使用我的海关字体的方法：

我有正确的语法，但我只需要使用.woff或.woff2字体文件而不是.ttf或.otf。我无法解释为什么它不再起作用，但我得到了我想要的东西，所以它很好〜

Answer 3

new OptimizeCSSPlugin({cssProcessorOptions: {
    safe: true
}}),