移动端系统不支持的字体前端怎么办

Posted 2023-04-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端系统不支持的字体前端怎么办相关的知识，希望对你有一定的参考价值。

在CSS中外部引用字体包
方法如下：

@font-face
font-family: SketchRockwell; /*这里是说明调用来的字体名字*/
src: url(‘SketchRockwell.ttf’); /*这里是字体文件路径*/

.my_CSS3_class
font-family: SketchRockwell; /*这里设置某参数的字体值，在这里是“my_CSS3_class”调用了你刚才声明的字体值"SketchRockwell"*/
font-size: 3.2em; /*这里是字体大小*/

为了混淆下面的是没有做注释的源文件:

@font-face
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);

.my_CSS3_class
font-family: SketchRockwell;
font-size: 3.2em;
参考技术A css字体样式包可以下载的，但是字体包尽量用免费的，以免引起侵权，这样你就可以使用个性的字体，美化页面，希望采纳！！本回答被提问者采纳

移动端布局，字体使用rem不生效问题

本文参考连接：https://blog.csdn.net/qq_35484341/article/details/78248371

移动端布局是最让我感到头疼的一件事，一直都是逃避的心态，不想面对，但没办法，公司前端就我一个人，所有的问题迟早都要自己解决，所以不得不开始摸索，最快的办法就是看前辈们都是怎么解决的，但是有些办法不一定适合自己，要挨个试，才知道哪个方法好用，这次我就来记录一下移动端布局rem不生效的问题。

众所周知，rem是相对于html元素的font-size大小而言的，而em是相对于其父元素，所以要用rem布局的话就必须设置根元素html的font-size大小，要是不设置的话根元素大小就默认是16px，也就是1rem = 16px;然后发现不好换算，所以就设置成了10px;，这样就是在写css的时候就直接除以10。

技术图片

但是这样写，字体大小并不能随着屏幕大小缩放而变换，这时候需要配合js来使用了。

一、使用js

(function(){
    function w() {
    var r = document.documentElement;
    var a = r.getBoundingClientRect().width;//获取当前设备的宽度
        if (a > 720 ){//720不固定，根据设计稿的宽度定
            a = 720;
        } 
        rem = a / 7.2;
        r.style.fontSize = rem + "px"
    }
    w();
    window.addEventListener("resize", function() {//监听横竖屏切换
        w()
    }, false);
})();