Могу ли я настроить объявление @font-face из внешнего импортированного CSS из такой службы, как Adobe Fonts?

avatar
Mark Hanna
9 августа 2021 в 04:40
247
1
0

Для сайтов, которые я создаю, довольно часто используется полужирный вес данного шрифта для их «жирного» варианта. Обычно это очень легко настроить с помощью пользовательского объявления @font-face, которое указывает на файлы, выделенные полужирным шрифтом, и содержит font-weight: 700;.

.

Хорошо, когда шрифты доступны по бесплатной лицензии и могут размещаться непосредственно рядом с веб-сайтом. Однако иногда шрифты, которые мне нужно использовать, доступны только по платной лицензии. Мой работодатель оплачивает подписку на Adobe Fonts, чтобы предоставить нам доступ к этим шрифтам.

Однако Adobe Fonts устанавливает свои собственные объявления @font-face в файлах CSS, которые он предоставляет для данного веб-проекта, а для полужирного полужирного шрифта он использует стандартный font-weight: 600;.

К сожалению, я нашел очень мало информации в Интернете об использовании @font-face с Adobe Fonts (или Typekit, как он раньше назывался). Самое близкое, что я нашел на собственном веб-сайте Adobe (https://www.adobe.com/devnet/edge-web-fonts/articles/use-at-font-face-with-with-font-services.html) ничего не говорит об использовании @font-face с Adobe Fonts/Typekit.

Я не верю, что URL-адреса файлов, которые Adobe Fonts использует в своем CSS, остаются статическими, поэтому я не думаю, что смогу повторно использовать их в своем собственном CSS, не рискуя сломать шрифты, когда эти URL-адреса перестанут быть правильными.

Есть ли способ в CSS сделать что-то вроде создания нового объявления @font-face на основе предыдущего, созданного в импортированном файле CSS, или изменить объявление @font-face, которое было включено таким образом? Я бы предпочел просто настроить шрифт для использования полужирных файлов, когда браузер считает, что он должен быть полужирным, вместо того, чтобы указывать браузеру использовать полужирный шрифт font-weight там, где обычно используется полужирный шрифт.

Источник
Brett Donald
28 сентября 2021 в 21:22
1

Почему бы вам просто не придерживаться объявлений @font-face от Adobe, а затем в вашем собственном CSS использовать font-weight 600 вместо полужирного шрифта?

Mark Hanna
29 сентября 2021 в 18:37
0

В этом случае мы также используем другой шрифт на веб-сайте, который использует правильный вес 700 для своего полужирного варианта, поэтому потенциально может быть довольно головной болью при обслуживании, чтобы убедиться, что правильный (но другой) жирный шрифт используется в каждом контексте. . И возможность использовать полужирный шрифт по умолчанию также избавляет меня от необходимости переопределять стили пользовательского агента по умолчанию, устанавливая жирность шрифта на «жирный» или «жирнее».

Ответы (1)

avatar
Mark Hanna
11 августа 2021 в 04:28
0

Для тех, кто еще сталкивается с этой проблемой, могу сказать, что на данный момент я решил создать собственное объявление @font-face с использованием URL-адресов из файла CSS Adobe Fonts, но с другим именем для семейства шрифтов.

Я использую семейство шрифтов Adobe Fonts в качестве запасного варианта на случай, если созданный мной шрифт не загружается, поэтому, если URL-адреса не работают, он должен, по крайней мере, вернуться к шрифту, настроенному Adobe Fonts для этого шрифта. веса, которые не соответствуют тому, что мне нужно.

/* Here Adobe Fonts uses @font-face to create the font family "adobe-font" */
@import "https://use.typekit.net/<my-project-key>.css";

@font-face {
    font-family: "Custom Font";
    src: url("https://use.typekit.net/path/to/font/file/regular.woff2") format("woff2"),
        url("https://use.typekit.net/path/to/font/file/regular.woff") format("woff"),
        url("https://use.typekit.net/path/to/font/file/regular.ott") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: auto;
}

@font-face {
    font-family: "Custom Font";
    src: url("https://use.typekit.net/path/to/font/file/italic.woff2") format("woff2"),
        url("https://use.typekit.net/path/to/font/file/italic.woff") format("woff"),
        url("https://use.typekit.net/path/to/font/file/italic.ott") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: auto;
}

@font-face {
    font-family: "Custom Font";
    src: url("https://use.typekit.net/path/to/font/file/semibold.woff2") format("woff2"),
        url("https://use.typekit.net/path/to/font/file/semibold.woff") format("woff"),
        url("https://use.typekit.net/path/to/font/file/semibold.ott") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: auto;
}

@font-face {
    font-family: "Custom Font";
    src: url("https://use.typekit.net/path/to/font/file/semibold-italic.woff2") format("woff2"),
        url("https://use.typekit.net/path/to/font/file/semibold-italic.woff") format("woff"),
        url("https://use.typekit.net/path/to/font/file/semibold-italic.ott") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: auto;
}

.my-class {
    font-family: "Custom Font", "adobe-font", sans-serif;
}

Это не идеально, но, поскольку я не смог найти никаких гарантий от Adobe, что их URL-адреса файлов шрифтов никогда не изменятся, это, по крайней мере, дает мне некоторую безопасность, если они изменятся.