Невозможно импортировать пользовательский шрифт, используя @ font-face в элементах полосы - PullRequest
Новая
       8

Невозможно импортировать пользовательский шрифт, используя @ font-face в элементах полосы

0 голосов
/ 07 апреля 2020

По какой-то причине я не могу использовать свой пользовательский шрифт с элементами чередования: 

// Case 1
stripe.elements (fonts: {
    family: "Indie Flower"
    src: "url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2)"
    weight: 500
})


// Case 2
stripe.elements (fonts: {
    family: "Gotham-Light"
    src: "url(http://localhost:5000/my-font)"
    weight: 500
})

Когда я использую Ind ie Flower в качестве шрифта, используя fontFamily: "Ind ie Flower", я вижу шрифт в элементе полосы, но не с «Gotham-Light».

Вот фактический код clojurescript: 

(let [
          elements (.elements stripe
                              (clj->js
                               ;; {:fonts [{:family "Gotham-Light"
                               ;;           :src (str "url(" (url) "/gotham-light" ")")
                               ;;           :weight 500
                               ;;           }]}
                               {:fonts [{:family "Indie Flower"
                                         :src (str "url(" (url) "/indie)")
                                         ;;:src "url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2)"
                                         :weight 500
                                         }]}
                               )
                              )
          card-element
          (.create elements "card"
                   (clj->js
                    {:style
                     {:base
                      {
                       :fontFamily "Indie Flower, Helvetica, sans-serif"
                       :fontSize 16
                       }
                      :invalid
                      {:color "#FFC7EE"}
                      }
                     }
                    ))]

      (.mount card-element "#card-element")
      (assoc db :stripe stripe :card-element card-element)
      )

Сторона сервера такова: Сторона сервера такая: Сторона сервера это: сторона сервера это: 

(defn font-handler2 [req]
  (assoc (resource-response "indie.woff2" {:root "public/"})
         :headers {
                   "Age" "608650",
                   "Content-Type" "font/woff2",
                   "Access-Control-Allow-Origin" "*",
                   "Timing-Allow-Origin" "*",
                   "X-Content-Type-Options" "nosniff",
                   "Content-Length" "19120",
                   "Alt-Svc"
                   "quic=\":443\"; ma=2592000; v=\"46,43\",h3-Q050=\":443\"; ma=2592000,h3-Q049=\":443\"; ma=2592000,h3-Q048=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000,h3-T050=\":443\"; ma=2592000",
                   "Connection" "close",
                   "Accept-Ranges" "bytes",
                   "X-XSS-Protection" "0",
                   "Cache-Control" "public, max-age=31536000"})


  )



(def routes ["/indie" font-handler2])

Если это поможет, вот ответы без тела (что очень долго, но в обоих случаях одинаково, что я на самом деле проверил.) 

user> (dissoc (http/get "http://localhost:5000/indie") :body)
{:cached nil,
 :request-time 7,
 :repeatable? false,
 :protocol-version {:name "HTTP", :major 1, :minor 1},
 :streaming? true,
 :http-client
 #object[org.apache.http.impl.client.InternalHttpClient 0x1947efde "org.apache.http.impl.client.InternalHttpClient@1947efde"],
 :chunked? false,
 :reason-phrase "OK",
 :headers
 {"Content-Type" "font/woff2",
  "Server" "Aleph/0.4.4",
  "Connection" "Close",
  "Date" "Tue, 07 Apr 2020 16:40:53 GMT",
  "content-length" "19120"},
 :orig-content-encoding nil,
 :status 200,
 :length 19120,
 :trace-redirects []}
user> (dissoc (http/get "https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2") :body)
{:cached nil,
 :request-time 47,
 :repeatable? false,
 :protocol-version {:name "HTTP", :major 1, :minor 1},
 :streaming? true,
 :http-client
 #object[org.apache.http.impl.client.InternalHttpClient 0x4346f38b "org.apache.http.impl.client.InternalHttpClient@4346f38b"],
 :chunked? false,
 :reason-phrase "OK",
 :headers
 {"Server" "sffe",
  "Age" "608650",
  "Content-Type" "font/woff2",
  "Access-Control-Allow-Origin" "*",
  "Timing-Allow-Origin" "*",
  "X-Content-Type-Options" "nosniff",
  "Content-Length" "19120",
  "Alt-Svc"
  "quic=\":443\"; ma=2592000; v=\"46,43\",h3-Q050=\":443\"; ma=2592000,h3-Q049=\":443\"; ma=2592000,h3-Q048=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000,h3-T050=\":443\"; ma=2592000",
  "Connection" "close",
  "Accept-Ranges" "bytes",
  "Expires" "Wed, 31 Mar 2021 15:37:07 GMT",
  "Date" "Tue, 31 Mar 2020 15:37:07 GMT",
  "Last-Modified" "Tue, 16 Jul 2019 23:56:42 GMT",
  "X-XSS-Protection" "0",
  "Cache-Control" "public, max-age=31536000"},
 :orig-content-encoding nil,
 :status 200,
 :length 19120,
 :trace-redirects []}

Первый / ind ie - до того, как я добавил заголовки cors.

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

В вашем примере отсутствует {}, поэтому я предполагаю, что правильный код будет: 

stripe.elements ({ fonts: {
    family: "Indie Flower"
    src: "url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2)"
    weight: 500
}})

, но в вашем примере с Clojure вы оборачиваете значение шрифтов в дополнительный вектор. Таким образом, вы фактически вызываете 

stripe.elements ({ fonts: [{
    family: "Indie Flower"
    src: "url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2)"
    weight: 500
}]})

Обратите внимание на дополнительный массив. Я ничего не знаю о полосе, но вам просто нужно удалить лишний вектор переноса? 

(.elements stripe
  (clj->js
    {:fonts
     {:family "Indie Flower"
      :src "url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2)"
      :weight 500}}))
0 голосов
/ 07 апреля 2020

Если это поможет, вот пример, который я собрал, который использует его: https://lightning-antique-dawn.glitch.me/

Код внешнего интерфейса: https://glitch.com/edit/#! / Lightning-antique-dawn? Path = views / checkout.hbs: 21: 16

Вы заметите, что мне пришлось настроить CORS на сервере: https://glitch.com/edit/#! / lightning-antique-dawn? path = server . js: 12: 53

Это связано с тем, что фактическим элементом является iframe на серверах Stripe, который загружает вашу конфигурацию, поэтому вы должны иметь возможность поддерживать домен js .stripe.com. origin, обращающийся к файлу шрифта. 

var elements = stripe.elements ({fonts: [{
    family: "Gotham Light",
    src: "url(/GothamLightRegular.otf)",
    weight: 500
}]})
var cardElement = elements.create('card', {
  style: {
    base: {
      fontWeight: 500,
      fontFamily: '"Gotham Light", sans-serif',
      fontSize: '15px',
    },
  }
});
cardElement.mount('#card-element');

Express конфигурация бэкэнда: 

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "https://js.stripe.com"); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static('public')); // contains the font file
...