Trying to overwrite IE default system font with another system font not working only in IE

时间:2017-08-30 20:10:07

标签: html css twitter-bootstrap internet-explorer fonts

Currently my font-family is set to Arial. In IE11, the webpage font is set to Times New Roman. Even though inspect element shows the font-family set to Arial, the UI displays Times New Roman.

And strangely, if I uncheck Arial in devtools, Arial displays correctly. This is only happening in IE, Chrome, FF, Edge are all displaying Arial.

I have no issues using a web font with @font-face... just overwriting the browser's default system font with another system font.

Any ideas?

I don't think it matters, but I am using bootstrap with less.

 jQuery.ajax({
            dataType: 'json',
            url: '<?php echo Mage::getUrl('photostudio/index/productsinfo');?>',
            data: {
                treatment_id:data.treatment_id,
            },
            success: function (json) {
                /*var enableDays = new Array();
                jQuery.each(json.available_dates, function (i, v) {
                    enableDays.push(v);
                });*/

                var dateToday = new Date();    
                var enableDays = ["2017-08-31","2017-09-01"];
                var dates = jQuery("#sandbox-container div").datepicker({
                    defaultDate: dateToday,
                    changeMonth: true,
                    changeYear: true,
                    numberOfMonths: 1,
                    minDate: dateToday,
                    maxDate: new Date(dateToday.getFullYear() + 1, dateToday.getMonth(), dateToday.getDate()),
                    beforeShowDay: function(dateToday){
                        var sdate = jQuery.datepicker.formatDate('yy-mm-dd',dateToday)
                        if(jQuery.inArray(sdate, enableDays) != -1) {
                            return [true];
                        }
                        return [false];
                    },
                    onSelect: function(selectedDate) { 
                        var option = this.id == "from" ? "minDate" : "maxDate",
                            instance = jQuery(this).data("datepicker"),
                            date = jQuery.datepicker.parseDate(instance.settings.dateFormat || jQuery.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                        alert(selectedDate.id);
                        dates.not(this).datepicker("option", option, date);
                    }
                });     
            }
});

inspect displays the font I have set in CSS

2 个答案:

答案 0 :(得分:0)

检查元素时,MSIE,Edge和FX开发工具不显示默认的userAgent样式规则。

所有网络浏览器都有默认字体系列的设置,可用于未指定任何网页的网页。 (样式规则从默认的userAgent规则向下级联)。

只有MSIE浏览器的用户设置为“忽略网页上指定的字体样式”(Internet选项&gt;常规选项卡,辅助功能按钮)。这就是...覆盖网页上指定的字体系列规则,其中字体系列名称已在IE的字体设置中指定.... Internet选项的常规选项卡&gt;字体按钮。

所有网络浏览器都有一个用户设置,可以显示要显示的字体大小。

在不同网络浏览器中比较网页布局时,请务必使用相同的字体默认设置配置每个测试浏览器。对于MSIE,还要取消选中“忽略网页上指定的字体样式”和“忽略网页上指定的字体大小”选项。

Web字体也可能失败。要解决IE中被阻止的内容和安全问题,首先设置工具&gt; Internet选项&gt;高级选项卡,选中“始终记录开发者控制台消息”...

在您的问题中包含复制网址或足够的源代码是一个好主意,这样我们就可以测试您的代码,看看它是您的编码还是测试/开发环境浏览器设置。

答案 1 :(得分:0)

Coworker帮助我使用了这个,似乎是font-family:'Arial'不是原生支持的font-family

请参阅https://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults/

如果没有定义font-faces,你最接近的就是做font-family:'sans-serif'(默认使用Arial字体,但在一些不太常见的浏览器上会有问题)。

你想要的是在自定义变量中为你想要的每个Arial变体声明一个@ font-face。您可以通过一个声明来逃避,因为我不确定您在整个网站中对Arial的使用是什么。

看起来像

@font-face {
font-family: @font-family-base;
src: local("Arial");
}