Rails 3, @font-face, сбой в работе с firefox

Ответ 1

Я исправил свою проблему.

Из этой статьи я узнал, что:

Firefox отклоняет все запросы на межсайтовый шрифт, если не заданы определенные заголовки:

[т.е.. Access-Control-Allow-Origin]

И, из этой статьи:

К сожалению, прямо сейчас S3 не позволяет вам указать заголовок Access-Control-Allow-Origin, с которым ваши объекты будут обслуживаться с помощью

Итак, у вас есть несколько вариантов:

• Слушайте шрифты из общей папки приложения, а не из S3
• Подавать шрифты из Rackspace, где может устанавливать заголовки
• Вставить шрифт в качестве строки Base64

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

UPDATE:

Amazon объявила вчера, что теперь они поддерживают совместное использование ресурсов Cross Origin (CORS), поэтому решение, вышеописанное, больше не нужно. Их руководство разработчика объясняет больше.

Ответ 2

Это конфигурация, которую я добавил в свой ковш в консоли управления AWS, чтобы настроить эту кросс-вещь:

Войдите в систему AWS → Консоль управления AWS → S3 → Найдите свою команду Bucket → Push properties (увеличительное стекло на бумаге по какой-либо причине) → Clic PERMISSIONS справа → "Редактировать конфигурацию CORS"

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

После двух часов исследований...: - (

Ответ 3

Amazon S3 теперь поддерживает CORS, вам больше не нужно вставлять шрифты BASE64 в ваш css (это сэкономит вам некоторую пропускную способность:)

http://aws.amazon.com/about-aws/whats-new/2012/08/31/amazon-s3-announces-cross-origin-resource-sharing-CORS-support/

Ответ 4

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

# config/environment/production.rb

  # Rack Headers
  # Set HTTP Headers on static assets

  config.assets.header_rules = {
    :global => {'Cache-Control' => 'public, max-age=31536000'},
    :fonts  => {'Access-Control-Allow-Origin' => '*'}
  }
  require 'rack_headers'
  config.middleware.insert_before '::ActionDispatch::Static', '::Rack::Headers'

-----

# lib/rack_headers.rb

require 'rack/utils'

module Rack
  class Headers

    def initialize(app, options={})
      @app = app

      default_path = Rails.application.config.assets.prefix || '/assets'
      @asset_path = options.fetch(:path, default_path)

      default_rules = Rails.application.config.assets.header_rules || {}
      @rules = options.fetch(:header_rules, default_rules)
    end

    def call(env)
      dup._call(env)
    end

    def _call(env)
      status, @headers, response = @app.call(env)
      @path = ::Rack::Utils.unescape(env['PATH_INFO'])

      if @path.start_with?(@asset_path)
        set_headers
      end

      [status, @headers, response]
    end

    def set_headers
      @rules.each do |rule, headers|
        case rule
        when :global # Global
          set_header(headers)
        when :fonts  # Fonts Shortcut
          set_header(headers) if @path.match %r{\.(?:ttf|otf|eot|woff|svg)\z}
        when Array   # Extension/Extensions
          extensions = rule.join('|')
          set_header(result) if @path.match %r{\.(#{extensions})\z}
        when String  # Folder
          set_header(result) if
            (@path.start_with? rule || @path.start_with?('/' + rule))
        when Regexp  # Flexible Regexp
          set_header(result) if @path.match rule
        else
        end
      end
    end

    def set_header(headers)
      headers.each { |field, content| @headers[field] = content }
    end
  end
end

-----

В этом решении используются правила для настройки разных заголовков для каждого файла на основе правил. Правила описаны здесь: https://github.com/thomasklemm/butler#providing-rules-for-setting-http-headers. В основном вы можете делать что-либо с помощью Regexps, но есть ярлыки для окончаний файлов, папок, веб-шрифтов и глобальных заголовков.

Ответ 5

Вы можете использовать следующий сайт для Base64 Кодировать шрифт. Пробовал использовать FontSquirel, но он не позволяет вам шифровать авторские права/купленные шрифты.

http://base64fonts.com/convert.php

Ответ 6

Просто добавьте заголовок для всего вашего ведра в s3.

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Ответ 7

Там обновление для этой темы. Кажется, что невозможно установить CORS, загрузив файл cors.xml в ведро. Теперь вам нужно щелкнуть его;). Этот поток спас меня некоторое время, ища решение, но, с другой стороны, я потерял некоторое время, загрузив и изменив файл cors.xml.

Текущее решение состоит в том, чтобы щелкнуть по свойствам ведрa > Permissons > , а затем нажать кнопку Добавить конфигурацию CORS