Кто-нибудь знает, как я могу включить таблицу стилей шрифтов google в моем приложении rails? Я попытался добавитьВключить Google Font in Rails App
<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200'
rel='stylesheet' type='text/css'>
В моем application.html.erb но ничего не делает
Вы уверены, что вы ставите <link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'> это на макет желания?
И в вашей соответствующей таблице стилей <layout>.css вы положили font-family:Raleway;?
Удостоверьтесь. Спасибо.
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<!-- Google font -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
............
application.css
body {
font-family: 'Ubuntu', sans-serif;
}
Я использую это так, может быть, это будет разъяснено.
ОБНОВЛЕНО
Попробуйте удалить scaffold.css.scss! Или просто откройте и прокомментируйте всю основную часть CSS этого файла.
Для внешней таблицы стилей добавьте в макете (application.html.erb)
stylesheet_link_tag 'application', 'put any external link'
Если вы используете
1) <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> в рельсах раскладку
2)
Стиль элемент с запрошенным шрифтом сети, либо в таблице стилей:
CSS selector {
font-family: 'Font Name', serif;
}
или инлайн стиле на самом элементе:
Текствы получили семейство шрифтов Tangerine
Пример: -
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200'
rel='stylesheet' type='text/css'>
body{
font-family: "Raleway", Arial, sans-serif;
}
Это работает, но не кажется очень рельсами ..? Как я могу перефразировать это? – Huw
я боролся с этим, потому что я имел такую строку:
<%= stylesheet_link_tag 'application',
media: 'all', 'data-turbolinks-track' => true %>
Это трудно сказать, где поставить свою ссылку на первый взгляд ,
Что вы хотели сделать, это разместить ссылку на таблицу стилей ПОСЛЕ'application', разделите ее запятыми.Как это:
<%= stylesheet_link_tag 'application',
'https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin',
media: 'all', 'data-turbolinks-track' => true %>
Затем используйте его в таблице стилей, как обычно, с семейства шрифтов собственности.
Конечно, мы можем @import его в SASS или делать это как обычно с тегом , но это просто другой способ, и это следует упомянуть здесь.
Ответ должен быть принятым решением, потому что это правильный способ сделать это imo. – Jubl
@Jubl Спасибо, Jubl! –
Я считаю, что наиболее интегрированный способ для редактирования приложения/активы/Views/application.html.erb и изменения:
<%= stylesheet_link_tag 'application.css' %>
к
<%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Catamaran','application.css' %>
Если добавить шрифт через @import как показано в других комментариях, в @import Bootstrap в application.css, конвейер ресурсов компилирует его в таблицу стилей приложений. Если вы поместите его в начало своего html в качестве ссылки, он добавится в виде отдельной таблицы стилей, которая замедляет загрузку страницы. Вы можете добавить код @import так же, как Google, из шрифтов, которые вы выбрали на сайте шрифта Google.
Этот совет очень важен! Спасибо за акцию! –
Просто добавьте код, предоставленный google, в начало вашего файла application.scss.
@import url('https://fonts.googleapis.com/css?family=Quicksand|Rubik');
пожалуйста, обратите внимание, рельсы предоставит вам application.css файл из коробки с требуют заявления. удалите их и переименуйте application.scss
не забудьте добавить имя файла @import; для любых других custome scssfiles в папке
Я думаю, что это лучший способ сделать это, шрифты не принадлежат 'application.html.erb'. Еще лучше вы можете сделать «fonts.scss», импортируя все нужные шрифты, а затем включите его в 'application.scss', чтобы у вас появился небольшой манифест шрифта – ohhh
добавьте связанную ссылку между head в application.html.erb и в CSS font-family: 'Font Name', cursive; –
Возможно, ваш шрифт CSS является семейством шрифтов: «Raleway», sans-serif; –
извините - не понимайте, что вы имеете в виду! – tommyd456