简体   繁体   English

如何更改html中的字体大小?

[英]How to change font size in html?

I am trying to make a website and I want to know how to change the size of text in a paragraph.我正在尝试制作一个网站,我想知道如何更改段落中文本的大小。 I want paragraph 1 to be bigger than paragraph 2. It doesn't matter how much bigger, as long as it's bigger.我希望第 1 段比第 2 段大。大多少都无所谓,只要大一点就行。 How do I do this?我该怎么做呢?

My code is below:我的代码如下:

<html>
<head>
<style>
  p {
    color: red;
  }
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>

Give them a class and add your style to the class.给他们上课,并在课堂上添加您的风格。

<style>
  p {
    color: red;
  }
  .paragraph1 {
    font-size: 18px;
  }
  .paragraph2 {
    font-size: 13px;
  }
</style>

<p class="paragraph1">Paragraph 1</p>
<p class="paragraph2">Paragraph 2</p>

Check this EXAMPLE检查这个例子

Or add styles inline:或添加样式内联:

<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>

If you're just interested in increasing the font size of just the first paragraph of any document, an effect used by online publications, then you can use the first-child pseudo-class to achieve the desired effect.如果您只是对增加任何文档第一段的字体大小感兴趣,这是在线出版物使用的效果,那么您可以使用 first-child 伪类来实现所需的效果。

p:first-child
{
   font-size:   115%; // Will set the font size to be 115% of the original font-size for the p element.
}

However, this will change the font size of every p element that is the first-child of any other element.但是,这将更改作为任何其他元素的第一个子元素的每个 p 元素的字体大小。 If you're interested in setting the size of the first p element of the body element, then use the following:如果您有兴趣设置 body 元素的第一个 p 元素的大小,请使用以下命令:

body > p:first-child
{
   font-size:   115%;
}

The above code will only work with the p element that is a child of the body element.上面的代码仅适用于作为 body 元素子元素的 p 元素。

If you want to do this without adding classes...如果您想在不添加类的情况下执行此操作...

p:first-child {
    font-size: 16px;
}

p:last-child {
    font-size: 12px;
}

or要么

p:nth-child(1) {
    font-size: 16px;
}

p:nth-child(2) {
    font-size: 12px;
}

You can't do it in HTML.你不能在 HTML 中做到这一点。 You can in CSS.你可以在 CSS 中。 Create a new CSS file and write:创建一个新的 CSS 文件并写入:

p {
 font-size: (some number);
}

If that doesn't work make sure you don't have any "pre" tags, which make your code a bit smaller.如果这不起作用,请确保您没有任何“pre”标签,这会使您的代码更小。

You can do this by setting a style in your paragraph tag.您可以通过在段落标签中设置样式来做到这一点。 For example if you wanted to change the font size to 28px.例如,如果您想将字体大小更改为 28px。

<p style="font-size: 28px;"> Hello, World! </p>

You can also set the color by setting:您还可以通过设置来设置颜色:

<p style="color: blue;"> Hello, World! </p>

However, if you want to preview font sizes and colors (which I recommend doing) before you add them to your website and use them.但是,如果您想在将它们添加到您的网站并使用它们之前预览字体大小和颜色(我建议这样做)。 I recommend testing them out beforehand so you pick a good font size and color that contrasts well with the background.我建议事先测试它们,以便您选择与背景形成鲜明对比的良好字体大小和颜色。 I recommend using this site if you wish to do so, couldn't find anything else: http://fontpreview.herokuapp.com/如果您愿意,我建议您使用此站点,找不到其他任何内容: http : //fontpreview.herokuapp.com/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM