动态更改字体

这是我当前的代码，但正如您所看到的，每当字体大小更改都会改变浏览器宽度的大小。 悬停效果不是字体大小的1.5倍，我怎样才能使悬停效果动态获取文本的当前字体大小并相应地将其加倍（1.5倍）？

----> https://jsfiddle.net/054yzoux/ <---------

HTML

    <nav class="navbar-menu">
    <ul id="list" class="test">
        <li id="emph nav-home">Home</li>
        <li id="nav-portfolio">Portfolie</li>
        <li id="nav-skills">Færdigheder</li>
        <li id="nav-erfaring">Erfaring</li>
        <li id="nav-kontakt">Kontakt mig</li>
    </ul>
</nav>

CSS

.navbar-menu ul li{
    display: block;
    font-size: 4vw;
    margin-top: 5%;
}

.navbar-menu ul li:hover{
    color: #fff;
    transform: translateX(3%);
    background-color: #888888;
    transition-duration: 0.3s;
    font-size: 2em;
}

问题要查看问题所在，请在jsfiddle中将鼠标悬停在文本上时增加浏览器宽度。 正如你看到的文字减少而不是增加50％

---

这个问题的出现是因为对于一个固定的视图， 4vw可能比2em悬停的小，这就是为什么它扩大了字体的原因，但对于大视图2em小于4vw ，这就是为什么毛刺效应 。

而不是2em（ 对于所有视口分辨率，它总是相同的 ）， 给出一个大于4vw 的vw值 ，也许5vw （这确保了在悬停时，新的字体大小将总是大于正常的字体大小）大小自所有视口分辨率5vw> 4vw ），它工作正常。

另一点需要注意的是，应该在元素的默认状态下提供转换 ，而不是在定义CSS选择器时提供。 这确保了在悬停和取出时发生。

.navbar-menu ul li{
    display: block;
    font-size: 4vw;
    margin-top: 5%;
    transition:all 0.3s;
}

.navbar-menu ul li:hover{
    color: #fff;
    transform: translateX(3%);
    background-color: #888888;
    font-size: 5vw;
}

<nav class="navbar-menu">
        <ul id="list" class="test">
            <li id="emph nav-home">Home</li>
            <li id="nav-portfolio">Portfolie</li>
            <li id="nav-skills">Færdigheder</li>
            <li id="nav-erfaring">Erfaring</li>
            <li id="nav-kontakt">Kontakt mig</li>
        </ul>
    </nav>

---

如果您希望在悬停时将字体大小加倍，则应将“em”单位用于初始状态和悬停状态。

以下代码将起作用：

.navbar-menu ul li{
display: block;
font-size: 3em;
margin-top: 5%;}

.navbar-menu ul li:hover{
color: #fff;
transform: translateX(3%);
background-color: #888888;
transition-duration: 0.3s;
font-size: 4em;}

---

由于您使用的是动画（转换），所以最好使用相同的单位以获得更准确的结果。

.navbar-menu ul li{
    ...
    font-size: 4vw;
    ...
}

.navbar-menu ul li:hover{
    ...
    font-size: 6vw;/* will give 50% enlarge effect*/
    ...
}

这是一个演示。

链接地址: http://www.djcxy.com/p/15341.html

上一篇: Dynamically changing font

下一篇: size relative to parent div?