2013-02-13 59 views
7

Khi tôi kiểm tra trang web của mình bằng cách sử dụng capybara-webkit và tôi chụp ảnh màn hình, hãy bỏ qua @ khai báo phông chữ trong CSS.Hiển thị phông chữ phông chữ @ trong Capybara-Webkit

Điều này đặc biệt xấu vì tôi đang sử dụng FontAwesome, vì vậy sẽ có sự khác biệt lớn về cách trang được hiển thị trong trình duyệt thực.

Làm thế nào để tái sản xuất: https://gist.github.com/anonymous/4948827

Output: http://i.imgur.com/5lsrleY.jpg

Có cách nào để sửa lỗi này?

+0

Bất kỳ thành công nào với vấn đề này? – luckyjazzbo

Trả lời

1

Tùy thuộc vào phiên bản của qt rằng capybara-webkit được xây dựng lại, webkit cần url phi localhost danh sách trắng. Điều đó bao gồm các tham chiếu meta tới các nội dung bên ngoài như phông chữ.

Để thực hiện điều đó xảy ra trên toàn cầu, thêm video này vào spec_helper.rb trong khối cấu hình rspec:

config.before(:each) do 
    page.driver.allow_url("the-domain-name.com") 
end 

Nếu bạn có một trước: mỗi đã có, chỉ cần ném nó ở đó để thay thế. allow_url cũng chấp nhận một chuỗi các chuỗi.

Tôi đã đặt nhận xét trong ý chính của bạn về hiệu ứng này.

+0

Tôi nghĩ rằng danh sách trắng này đã được khoảng một thời gian nhưng qt ăn cảnh báo. Qt5 hiển thị chúng, tuy nhiên, và là cách tôi vấp vào giải pháp này. – IAmNaN

1

Một số nghiên cứu cho thấy rằng hoàn toàn có thể hiển thị phông chữ tùy chỉnh trong Capybara-Webkit, giống như với PhantomJS. Điều này PhantomJS Forum Post xác định các vấn đề rắc rối. Tóm tắt nhanh:

  1. Phông chữ SVG hoạt động tốt nhất.
  2. Phông chữ OTF có xu hướng không hoạt động.
  3. Nó phải được sửa bằng Qt5, vì vậy hãy kiểm tra phiên bản Qt bạn đã xây dựng để chống lại.
Các vấn đề liên quan