有些网页用的字体是自己电脑没有的，怎么知道替换字体？

Posted 2023-03-31

上国外的一些网战，有些字体是自己电脑没有的，但替换了的字体有时很好看，有时会比原来设计人设计的字体更般配，我怎么知道我的电脑默认什么字体替换了原字体？我试过用火狐虫子不行啊，那样看的是网页要求的字体，有办法不？

查看css，查找font-family，例font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif，如果你本机都没有，且浏览器没有设置替换字体，一般默认英文为Arial字体。

css3中支持自定义字体，定义字体需要指定的路径，通过查找下面的信息可以看网页中代使用了什么字体。

@font-face

font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
,url('/example/css3/Sansation_Light.eot'); /* IE9+ */


@font-face

font-family: myFirstFont;
src: url('/example/css3/Sansation_Bold.ttf')
,url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;


div

font-family:myFirstFont;

</style>

使用自定义字体

注释：Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。 参考技术A 用谷歌浏览器。。按F12--->Elements--->Styles在这里面可以调网页的字体样式。。你说的那些国外网站的字体样式应该是用CSS自己写的。。 参考技术B 开始→控制面板→Internet 选项→常规→字体（看好原来的字体，别越换越糟糕）→替换→确定本回答被提问者采纳 参考技术C 记得 chrome 审查元素里 可以看网页上的字体样式

H5页面中字体大小动态配置

参考技术A html 元素是文档的根元素，对html设置了字体大小，其子元素会继承html字体的大小。

不同的浏览器默认有的默认html的字体是16px，有的是14px。

同时浏览器字体的大小还会受到你自己在手机里配置的系统字体大小的影响。

这么多因素，如果只靠css里配置html字体大小，子元素基于html的rem是不能保证在不同的手机端适配的。

所以可以通过js动态来计算html应该配置多大的字体。

<script>

    function htmlFontSize()

        var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

        var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

        var width = w > h ? h : w;

        width = width > 720 ? 720 : width;

        var fz = ~~(width * 100000 / 36) / 10000/2;

        document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px";

        var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px', '') * 10000) / 10000;

        if (fz !== realfz)

            document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";

       

   

    htmlFontSize();

    </script>

在js计算出html的字体大小以后，就可以在这个基础上配置各子元素的字体大小了。

html的字体大小设置为font-size100px原因:

htmlfont-size:100px;

h1font-size: 0.16rem;//100*0.16=16px

.ccfont-size:0.14rem;//14px

又为什么要把html的font-size设置成50px:

因为设备像素比有2的，还有3的，我们按照设备像素比是2的开发，如果htmlfont-size:50px;那么设计稿ui中得头部header的高度是86px:height:0.86rem.(即：50px*0.86rem=43px，那么到了设备像素比是2的设备上，header的高度就是86px)这样就省去了除以2的计算。