CSS 字体大小教程 |
您所在的位置:网站首页 › html滚动标签的字放大 › CSS 字体大小教程 |
你可以使用 CSS 的 font-size 属性来确定文本的大小。 .container { font-size: 33px; }这个属性的值可以是多种类型: 关键字(绝对大小和相对大小关键字)长度(例如像素 px 和 em 单位),以及百分比.container { font-size: xx-large; }问题是:你应该选择哪种类型的值,为什么? 这就是本文要解决的问题。它将向你展示如何使用 font-size 属性,以及它的许多值之间的差异。因此,下次你需要更改文本的字体大小时,你就知道要使用什么值。 关键字值有两种类型的关键字值可以与字体大小一起使用:absolute-size 绝对大小和 relative-size 相对大小关键字。 绝对大小关键字下面的代码使用 absolute-size 关键字 small 来调整 HTML 文本的大小。 .childElement { font-size: small; }有更多绝对大小关键字选项可供选择: xx-smallx-smallsmallmediumlargex-largexx-largexxx-largeabsolute-size 关键字的值由浏览器的默认字体大小决定。通常,这个值是 medium。 相对大小关键字相对大小的关键字是另一个要考虑的关键字选项。你有两种选择:smaller 和 larger。 .parentElement { font-size: smaller; }带有 relative-size 关键字的元素的字体大小与其父元素的字体大小相关——更大或更小。 换句话说,父元素的字体大小会影响子元素的字体大小,如下所示。 在这个例子中,相对大小值 smaller 应用于子元素,而绝对大小值 large 应用于父元素。 长度值font-size 接受几个不同的长度值。我们将探讨其中的三个:像素(px)以及 em 和 rem 单位。不管你如何选择,你使用的长度值必须为正值。 .parentElement { font-size: 60px; } 像素像素是绝对长度单位。这意味着,它们不受其他元素的影响,例如父元素或窗口大小。 因此,像素是精确的:你定义元素上所需的确切像素数,这通常就是你得到的。但是,浏览器之间可能存在细微差别。 请注意,子元素使用像素并在上面的代码示例中具有相同的字体大小。 EMs像素可以被视为是固定的,而 em 则可被视为是可变的。 那是因为 em 值是一个相对长度单位。使用 em 值的元素的字体大小与其父元素的字体大小有关。 但是,假设你尚未为父元素设置字体大小,你也没有在 DOM 中更高层级的其他地方设置一个,在这种情况下,em 值是使用浏览器的默认值(通常为 16px)计算的。 让我们把这个想法具体化。 假设父元素设置为 30px,子元素设置为 2em。 然后,子元素的渲染字体大小为 60px(2 x 30px = 60px)。你可以在下面的代码中看到这种情况。 由于它们的复合效应,em 值可能会出现问题,这在以下示例中得到了证明。 当你有多个使用 em 值相互嵌套的元素时,字体大小值会复合:它们变得越来越大。这就是复合效应。 REMs输入 rem 值,创建这些值是为了处理 em 的复合问题。 回想一下 em 值是相对于父元素的。相反,rem 值与根(html)元素的字体大小有关。 这意味着你可以将 rem 值应用于元素,并且不会受到父元素字体大小的影响。这避免了上面的复合效应。 此示例使用带有 rem 值的 font-size 属性。 这是上面例子的一个关键点:父元素的字体大小不会影响子元素的字体大小。 百分比百分比提供了另一种设置相对于父元素字体的字体大小的方法。 带有百分比的元素根据其父元素来确定其字体大小。百分比的值必须为正。 这是一个例子。 如你所见,在字体大小方面,你有很多选择可以满足需求。 我在 amymhaddad.com 上写了关于学习编程以及最佳方法的文章。我还发布了有关编程、学习和生产力的推文:@amymhaddad。 原文:CSS Font Size Tutorial – How to Change Text Size in HTML,作者:Amy Haddad |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |