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

Posted 2023-03-27

参考技术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的计算。

如何在 reactjs 中动态更改字体大小和字体粗细？

【中文标题】如何在 reactjs 中动态更改字体大小和字体粗细？

【英文标题】：How to change font size and font weight dynamically in reactjs?

【发布时间】：2021-06-06 08:05:35

【问题描述】：

我正在尝试动态更改我的反应应用程序的标题部分。 我想要我的 React Web 应用程序的主页和其他页面使用不同的字体大小、字体粗细、标题和副标题。 这就是我想要的主页。 Hello there 在首页上应该较小，但 Welcome Back 应该较大

这是我在其他页面上想要的。 Hello there 在主页上应该更大，但 lorem ipsum lorem ipsum 应该很小

这是我的主页标题代码

const Hero = ( fontSize, fontWeight, title, subTitle ) => 

return (
    <div className="mt-2 mb-8">
        <p className="font-heading text-lg font-normal text-white">Hello There ????,</p>
        <p className="font-heading text-3xl font-bold text-white">subTitle</p>
         // another react component
    </div>
)


export default Hero

我想知道如何动态更改此代码，以便我可以将它用于其他页面，绕过字体粗细、字体大小、标题和副标题的不同属性。 我正在使用 react 和 tailwind css

任何人请帮我解决这个问题。 谢谢 已编辑：

pathName === '/' ? (
                <>
                    <p className="font-heading text-lg font-normal text-white">`Hello There ????,</p>
                    <p className="font-heading text-3xl font-semibold text-white">subTitle</p>
    

        </>
        ) : (
            <>
                <p className="font-heading text-3xl font-semibold text-white">Hello There ????,</p>
                <p className="font-heading text-lg font-normal text-white">subTitle</p>
            </>
        )

【参考方案1】：

您可以添加内嵌样式

const Hero = ( fontSize, fontWeight, title, subTitle ) => 

return (
    <div className="mt-2 mb-8">
        <p style=fontSize:fontSize, fontWeight:fontWeight className="font-heading text-lg font-normal text-white">title</p>
        <p className="font-heading text-3xl font-bold text-white">subTitle</p>
    </div>
)


export default Hero

并为其他元素做相应的操作

编辑： 或者你可以传入 fontSize 和 fontWeight 作为类名

const Hero = ( titleFontSize,subTitleFontSize, titleFontWeight, subTitleFontWeight, title, subTitle ) => 
    
    return (
        <div className="mt-2 mb-8">
            <p className=`font-heading $titleFontSize $titleFontWeight text-white`>title</p>
            <p className=`font-heading $subTitleFontSize $subTitleFontWeight text-white`>subTitle</p>
        </div>
    )
    
    
    export default Hero

然后，每当您使用组件时，您都会传递这些道具，例如

<Hero titleFontSize="text-lg" subTitleFontSize="text-3xl" tileFontWeight="font-normal" subTitleFontWeight="font-bold" title="Title" subTitle="Sub Title" />

或者使用 if 语句

const Hero = ( scenario1, title, subTitle ) => 
    
    return (
        <div className="mt-2 mb-8">
            <p className=`font-heading $scenario1 ? "text-lg font-normal" : "text-3xl font-bold" text-white`>title</p>
            <p className=`font-heading $scenario1 ? "text-3xl font-bold" : "text-lg font-normal" text-white`>subTitle</p>
        </div>
    )
    
    
    export default Hero

并像这样使用它

<Hero title="Title" subTitle="Subtitle" scenario1/> // This will render Scenario 1
<Hero title="Title" subTitle="Subtitle"/> // This will render default -in your case its Scenario 2

【讨论】：

感谢您的回复。我不认为我们可以使用内联顺风 css

内联样式会覆盖任何其他样式，因此如果您对此实例有特定的 fontSize 和 weight 的话，这样做是安全的

这对我来说很有意义

传几个props可以吗？

是的，完全没问题，但如果你只有这两种情况，你可以有 if 语句检查if(secnario1) text-lg font-normal else text-3xl font-bold

【参考方案2】：

我编辑我的答案

检查一下：

<p 
  className="font-heading text-white " +
  (pathName !== '/'? "text-3xl font-semibold" : "text-lg font-normal")
 
 >Hello There ?,
</p>
<p 
  className="font-heading text-white " +
  (pathName === '/'? "text-3xl font-semibold" : "text-lg font-normal")

>
     subTitle
</p>

【讨论】：

如果我这样做，那么我必须传递两个字体粗细和两个字体大小作为标题和副标题的道具

@RishiPurwar tou right ，我编辑了我的答案

不错的方法...谢谢