Bất cứ ai cũng biết cách tôi có thể bao gồm một bảng kiểu phông chữ google trong ứng dụng đường ray của mình? Tôi đã cố gắng thêmBao gồm Google Font trong Rails App
<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200'
rel='stylesheet' type='text/css'>
Into tôi application.html.erb nhưng điều đó không làm bất cứ điều gì
Bạn có chắc chắn rằng bạn đang đặt <link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'> này vào bố cục mong muốn của bạn?
Và trong biểu định kiểu <layout>.css tương ứng của bạn, bạn đã putted font-family:Raleway;?
Đảm bảo chắc chắn. Cảm ơn.
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;
}
tôi sử dụng nó theo cách này, có lẽ đây sẽ làm rõ.
CẬP NHẬT
Cố gắng loại bỏ scaffold.css.scss của bạn! Hoặc chỉ cần mở và nhận xét tất cả phần nội dung của CSS của tệp này.
Đối với style sheet bên ngoài thêm video này vào cách bố trí của bạn (application.html.erb)
stylesheet_link_tag 'application', 'put any external link'
Nếu bạn sử dụng
1) <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> trong đường ray bố trí
2)
Phong cách phần tử có phông chữ web được yêu cầu, trong biểu định kiểu:
CSS selector {
font-family: 'Font Name', serif;
}
hoặc với một phong cách nội tuyến trên các yếu tố chính:
văn bản của bạnbạn có phông chữ gia đình Tangerine
Ví dụ: -
<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;
}
Điều này làm việc, nhưng dường như không có đường ray ..? Làm thế nào tôi có thể tái yếu tố này? – Huw
Tôi đã đấu tranh với cái này, bởi vì tôi đã có một dòng như sau:
<%= stylesheet_link_tag 'application',
media: 'all', 'data-turbolinks-track' => true %>
Thật khó để nói nơi để đặt liên kết của bạn tại một cái nhìn đầu tiên .
Điều bạn muốn làm là đặt liên kết biểu định kiểu của mình SAU'application', chia bằng dấu phẩy.Như thế này:
<%= stylesheet_link_tag 'application',
'https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin',
media: 'all', 'data-turbolinks-track' => true %>
Sau đó, sử dụng nó trong stylesheet của bạn như bình thường với font-family tài sản.
Tất nhiên, chúng tôi có thể @import nó trong một SASS, hoặc làm điều đó như bình thường với một liên kết , nhưng đó chỉ là một cách khác và nó nên được đề cập ở đây.
Bạn trả lời là giải pháp được chấp nhận vì đây là cách thích hợp để thực hiện nó. – Jubl
@Jubl Cảm ơn, Jubl! –
Tôi tin rằng cách tích hợp hầu hết là để chỉnh sửa ứng dụng/tài sản/views/application.html.erb và thay đổi:
<%= stylesheet_link_tag 'application.css' %>
để
<%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Catamaran','application.css' %>
Nếu bạn thêm font qua @import như được hiển thị trong các nhận xét khác, trong @import Bootstrap trong application.css, đường dẫn nội dung biên dịch nó thành tệp định kiểu ứng dụng. Nếu bạn đặt nó vào đầu của html của bạn như là một liên kết, nó được thêm vào như là một stylesheet riêng biệt mà làm chậm tải trang. Bạn có thể thêm mã @import giống như Google cung cấp từ các phông chữ bạn chọn trên trang phông chữ của Google.
Mẹo này rất quan trọng! Cảm ơn bạn đã chia sẻ! –
Chỉ cần thêm mã do google cung cấp vào đầu tệp application.scss của bạn.
@import url('https://fonts.googleapis.com/css?family=Quicksand|Rubik');
xin lưu ý ray sẽ cung cấp cho bạn với application.css tập tin ra khỏi hộp với yêu cầu báo cáo. xóa những tên này và đổi tên ứng dụng.scss
nhớ thêm @import filename; cho bất kỳ scssfiles theo yêu cầu nào khác trong thư mục
Tôi nghĩ đây là cách tốt nhất để làm điều đó, các phông chữ không thuộc về 'application.html.erb'. Tốt hơn là bạn chỉ có thể tạo một 'fonts.scss', nhập tất cả các phông chữ bạn cần và sau đó đưa nó vào trong' application.scss' để bạn có một bản kê phông chữ nhỏ – ohhh
thêm liên kết được cung cấp giữa đầu trong application.html.erb và trong họ phông chữ CSS: 'Tên phông chữ', chữ thảo; –
Có lẽ CSS phông chữ của bạn là họ phông chữ: 'Raleway', sans-serif; –
xin lỗi - đừng hiểu ý bạn! – tommyd456