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

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

238 голосов
/ 13 июня 2009

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

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

Ответы [ 10 ]

289 голосов
/ 13 июня 2009

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

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

71 голосов
/ 13 июня 2009

Вы можете использовать элемент 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>
32 голосов
/ 13 июня 2009

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

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

26 голосов
/ 13 июня 2009

Так как вы новичок в 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. Веселитесь!

14 голосов
/ 13 июня 2009

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

7 голосов
/ 19 декабря 2016 
Selector name{
font-weight:bold;
}

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

p{
font-weight:bold;
}

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

p{
 font-weight:bolder;
 font-weight:600;
}
7 голосов
/ 13 июня 2009 
<!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>
7 голосов
/ 13 июня 2009 
font-weight: bold
6 голосов
/ 13 июня 2009

шрифт-вес: жирный;

0 голосов
/ 12 декабря 2017

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

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

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

.className {
  font-weight: bold;
}

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

.className {
  font-weight: 700;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...