无法在条纹元素中使用@ font-face导入自定义字体

Question

由于某些原因，我无法将我的自定义字体与条纹元素一起使用：

// 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
})

[当我使用Indie Flower作为字体，并且使用fontFamily：“ Indie 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 []}

第一个/独立是在我添加cors标头之前。

Answer 1

如果有帮助，下面是我使用它的一个示例：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

这是因为实际的Element是Stripe服务器上的iframe，它会加载您的配置，因此您需要能够支持js.stripe.com域源访问字体文件。

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