Как сделать свой шрифт полужирным с помощью css?

Я очень новичок в HTML и CSS, и мне просто интересно, как я могу сделать свой шрифт полужирным с помощью CSS.

У меня есть простая HTML-страница, которая импортирует файл CSS, и я могу изменить шрифт в CSS. Но я не знаю, как сделать шрифт полужирным, может ли кто-нибудь мне помочь?

Ответы

Ответ 1

Вы можете использовать объявление CSS font-weight: bold;.

Я бы посоветовал вам прочитать руководство для начинающих CSS в http://htmldog.com/guides/cssbeginner/.

Ответ 2

Вы можете использовать элемент strong в html, который отлично семантически (также хорош для чтения с экрана и т.д.), который обычно отображает в виде жирного текста:

See here, some <strong>emphasized text</strong>.

Ответ 3

Вы использовали бы font-weight: bold.

Вы хотите сделать весь документ полужирным? Или просто его части?

Ответ 4

Синус, который вы новичок в html, состоит из трех готовых примеров использования CSS вместе с html. Вы можете просто поместить их в файл, сохранить его и открыть с помощью браузера по вашему выбору:

Этот шаблон напрямую вставляет ваш стиль CSS в ваши теги/элементы. Как правило, это не очень хороший подход, потому что вы всегда должны отделять контент /html от дизайна.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
    </head>           
    <body>
        <p style="font-weight:bold;">Hi, I'm very bold!</p>
    </body>
</html>

Следующий - более общий подход и работает над всеми тегами "p" (обозначает абзац) в вашем документе, а дополнительный делает их ОГРОМНЫМИ. Btw. Google использует этот подход при поиске:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
        <style type="text/css">
            p {
              font-weight:bold;
              font-size:26px;
            }
        </style>
    </head>   
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

Вы, вероятно, займете пару дней, играя с первыми примерами, но вот последний. В этом вы, наконец, полностью разделяете дизайн (css) и контент (html) друг от друга в двух разных файлах. stackoverflow использует этот подход.

В одном файле вы помещаете все CSS (назовите его "hello_world.css" ):

  p {
    font-weight:bold;
    font-size:26px;
  }

В другом файле вы должны поместить html (назовите его "hello_world.html" ):

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
        <link rel="stylesheet" type="text/css" href="hello_world.css" />  
    </head>       
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

Надеюсь, это немного поможет. Чтобы адресовать определенные элементы вашего документа, а не все теги, вы должны ознакомиться с атрибутами class, id и name. Получайте удовольствие!

Ответ 5

Используйте свойство CSS font-weight

Ответ 7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
   body
   {
      font-weight: bold;
   }
</STYLE>
</HEAD>
<BODY>
Body text is now bold.
</BODY>
</HTML>

Ответ 9

Selector name{
font-weight:bold;
}

Предположим, вы хотите сделать полужирным для p элемента

p{
font-weight:bold;
}

Вы можете использовать другое альтернативное значение вместо жирного шрифта, например

p{
 font-weight:bolder;
 font-weight:600;
}