Как сделать мой шрифт жирным, используя CSS?

249

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

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

css 
— питер-б
источник
6
Я предлагаю вам прочитать спецификацию CSS2, она дает очень подробное объяснение того, что вы можете сделать и как это сделать. И это тоже не слишком сухо. w3.org/TR/CSS2
— Роберт К
— Ejaz

Ответы:

76

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

See here, some <strong>emphasized text</strong>.
Развернуть фрагмент

Или вы можете использовать в font-weightсвойство CSS для стилизации текста любого элемента жирным шрифтом:

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
Развернуть фрагмент

— erenon
источник
Я выделил весь второй абзац жирным шрифтом, чтобы он не подчеркивал слова «жирный текст», это просто стиль.
— GKFX
2
Семантически здорово, если вы пытаетесь что-то подчеркнуть; если это стиль без попыток подчеркнуть, этот <strong>элемент семантически вводит в заблуждение.
— января
26

Итак, вы новичок в 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атрибутами. Радоваться, веселиться!

— merkuro
источник
8 
Selector name{
font-weight:bold;
}

Предположим, вы хотите выделить жирным шрифтом элемент p

p{
font-weight:bold;
}

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

p{
 font-weight:bolder;
 font-weight:600;
}
— Сантош Халсе
источник
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>
— Ян Бойд
источник
-1

Вы могли бы использовать пару подходов. Сначала будет использовать сильный тег

Here is an <strong>example of that tag</strong>.

Другой подход заключается в использовании свойства font-weight. Вы можете достичь inline, или через класс или идентификатор. Допустим, вы используете класс.

.className {
  font-weight: bold;
}

Кроме того, вы также можете использовать жесткое значение для font-weight, и большинство шрифтов поддерживают значение между 300 и 700, увеличенное на 100. Например, следующее будет выделено жирным шрифтом:

.className {
  font-weight: 700;
}
— Эндрю Тузсон
источник
Другие ответы уже охватили эти вопросы. Как этот ответ увеличивает ценность?
— Базилик Бурк
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.