Webfonts.pro — здесь собраны лучшие шрифты

Ответы на вопрос(8)


05 сент. 2012 г., 23:24

что это довольно давно, но, похоже, никто не предоставил конкретный пример исправления. Итак, вот мы для будущих поколений:

У меня была такая же проблема с Apache2 и Chrome. Chrome предупреждает, что файл, отправленный с помощью mime-типа application / octet-stream, на самом деле является файлом шрифта, что и было.

Для меня исправлением было добавить следующую строку в мой файл конфигурации apache2:

AddType application/x-font-ttf .ttf

пс:

Я пытался обновить волшебный файл, но он не работал после полной перезагрузки apache2. Совпадения, которые я пробовал (используя реальные символы табуляции между полями и согласно указанным выше магическим образцам), приведены ниже:

  # True Type fonts
  0 string  \000\001\000\000\000  application/x-font-ttf
  0 string  \000\001\000\000\000  TrueType font data mime  application/x-font-ttf

Свернуть комментарии

27 февр. 2011 г., 02:13

Если ваш файл начинается с этих 5 байтов, это, вероятно, TTF.

Свернуть комментарии

26 февр. 2011 г., 19:11

лучше всего взломать код и испачкать руки.

Откройте библиотеку Uploads (system / library / Upload.php) и найдите этот фрагмент кода в строке 200:

Вы увидите, что там устанавливается $ this-> file_type. var_dump () это и посмотреть, что он содержит.

Скорее всего, у вас есть какой-то непонятный тип MIME, о котором CodeIgniter не знает. Поместите этот тип MIME в config / mimes.php, и он должен работать нормально.

Когда он заработает и вы примете этот ответ, пожалуйста, прокомментируйте используемый вами тип MIME, и я добавлю его в CodeIgniter Reactor, чтобы никто не застрял.

Свернуть комментарии

26 февр. 2011 г., 16:44

бщий, который используется для указания двоичных данных без назначенного типа MIME.

Свернуть комментарии


26 февр. 2011 г., 16:24

но я склонен полагать, что правильный mimetype:

Я не уверен, решит ли это вашу проблему

Свернуть комментарии

12 июл. 2016 г., 08:31

Можете ли вы попробовать это:

Комментировать

13 февр. 2019 г., 15:55

ттф это шрифт / ттф

otf is font / otf

woff это шрифт / woff

и woff2 это шрифт / woff2

Комментировать

Features

Inter comes with many OpenType features that can be used to tailor functionality and aesthetics to your specific needs. Some of these features can be combined to form a great number of alternative variations.

This feature is usually enabled by default and causes certain characters to adjust themselves or be replaced depending on the surrounding context.

Fixed-width numbers are useful for tabular data, where comparing columns across rows is desired.

DisabledEnabled123456789012345678901131711 1131711 0040900 0040900 11:31,711 11:31,711 00:40.900 00:40.900 0.45, 0.91, +0.08 0.45, 0.91, +0.08 1.00, 9.44, −0.13 1.00, 9.44, −0.13 0.00, 1.13, ~7.12 0.00, 1.13, ~7.12 

This feature is contextually sensitive and will convert «words» of numbers separated by forward slash into proper fractions. This feature is dynamic and allows for any fractions. Note that the digits used for fractions are custom-made for their small size, and are even made separately from the slightly larger Superscript and Subscript numbers.

DisabledEnabled1/3  3/4  1/51/3  3/4  1/518/29  16/518/29  16/51337/5910381337/591038

Switches out some glyphs to work better with capital letters and numbers.

DisabledEnabled(Hello) World {9000}(Hello) {9000}SCHOOL @ RUNSCHOOL @ RUN3 + 9 = 12 * 13 + 9 = 12 * 1*+÷±×=≠≈•~<>≤≥*+÷±×=≠≈•~<>≤≥→ ← ⟶ ⟵ − — – — → ← ⟶ ⟵ − — – — :


Inter provides just a few ligatures for combining characters for which layout support in various apps is spotty.

DisabledEnabledA⃝A⃝#⃞#⃞

This means that for instance enclosed glyphs works everywhere, not just in apps with correct combining character logic.

Alternate style for a few chacters. This feature is usually disabled by default.

DisabledEnabled¡¿What?!¡¿What?!¿¡What!?¿¡What!?

DisabledEnabledHello 0123Hello 0123

DisabledEnabledHello 0123Hello 0123

DisabledEnabledX0123 (+)-X0123 (+)-XabcdefghijklmnopqrstuvwxyzXabcdefghijklmnopqrstuvwxyz

DisabledEnabledH0123 (+)-H0123 (+)-XabcdefghijklmnopqrstuvwxyzXabcdefghijklmnopqrstuvwxyz

An alternate style of digits. Note that individual digit styles can be cherry-picked using the cvXX features.

DisabledEnabled123456789012345678901346913469

Alternate glyph set that increases visual difference between similar-looking characters.

DisabledEnabledWPACO9XSI112O9WP0ACO9XSI1012O9IllegalIllegalβeta ßeta Busineßβeta ßeta Busineß

Lower case r curved into neighboring round shapes for increased legibility and personality.

DisabledEnabledSaraSarairdirdMonroeMonroe

DisabledEnabledO123O0123

Allows cherry-picking alternate characters.

FeatureDisabledEnabledcv0111cv0244cv0366cv0499cv05l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽl ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽcv06r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟr ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟcv07ßßcv08I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ ἺI Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲcv0933cv10G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ ḠG Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡcv11a á ă ắ ặ ằ ẳ ẵ ǎ â ấ ậ ầ ẩ ẫ ȁ ä ǟ ȧ ạ ǡ à ả ȃ ā ą ẚ å ǻ ḁ ãa á ă ắ ặ ằ ẳ ẵ ǎ â ấ ậ ầ ẩ ẫ ȁ ä ǟ ȧ ạ ǡ à ả ȃ ā ą ẚ å ǻ ḁ ã

The story behind Inter

Inter started out in late 2016 as an experiment to build a perfectly pixel-fitting font at a specific small size (11px.) The idea was that by crafting a font in a particular way, with a particular coordinate system (Units Per EM), and for a particular target rasterization size (11), it would be possible to get the best of both sharpness and readability.

However after a few months of using an early version of Inter, it dawned on everyone exposed to the test that this approach had some serious real-world problems. Most notably that it was really hard to read longer text. Because of the pixel-aligning nature of that approach, the font took an almost mono-spaced appearance, making it really easy to read numbers, punctuation and very short words, but eye-straining to read anything longer.

The project was rebooted with a different approach, sticking with the specific UPM, but crafting glyphs and kerning in a way that made for more variation in the rhythm and smoother vertical and horizontal stems. As Inter was being developed, it was tested on an internal version of Figma—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback.

Serif Fonts

font-family Example text
Georgia, serif
«Palatino Linotype», «Book Antiqua», Palatino, serif
«Times New Roman», Times, serif

Sans-Serif Fonts

font-family Example text
Arial, Helvetica, sans-serif
«Arial Black», Gadget, sans-serif
«Comic Sans MS», cursive, sans-serif
Impact, Charcoal, sans-serif
«Lucida Sans Unicode», «Lucida Grande», sans-serif
Tahoma, Geneva, sans-serif
«Trebuchet MS», Helvetica, sans-serif
Verdana, Geneva, sans-serif

Monospace Fonts

font-family Example text
«Courier New», Courier, monospace
«Lucida Console», Monaco, monospace

Tip: Also check out all available Google Fonts and how to use them.

Using Bold Text

You must add another rule containing descriptors for bold text:

Example

@font-face {   font-family: myFirstFont;   src: url(sansation_bold.woff);   font-weight: bold; }

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many rules for the same font.

Descriptor Values Description
font-family name Required. Defines a name for the font
src URL Required. Defines the URL of the font file
font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded Optional. Defines how the font should be stretched. Default is «normal»
font-style normal italic oblique Optional. Defines how the font should be styled. Default is «normal»
font-weight normal bold 100 200 300 400 500 600 700 800 900 Optional. Defines the boldness of the font. Default is «normal»
unicode-range unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF»

Типы файлов WOFF

Ассоциация основного файла WOFF

.WOFF

Формат файла: .woff
Тип файла: Web Open Font Format File

WOFF расширение файла шрифта веб основном с Format Web Open Font (WOFF), формат, который в основном содержится на веб-страницах. Он использует сжатую версию той же таблицы на основе структуры шрифта, используемого TrueType, OpenType и формат Open Font.

Создатель: Open Source
Категория файла: Файлы шрифтов
Ключ реестра: HKEY_CLASSES_ROOT\.woff

Программные обеспечения, открывающие Web Open Font Format File:

Internet Explorer, разработчик — Microsoft Corporation

Совместимый с:

Windows
Mac

Mozilla Firefox, разработчик — Mozilla

Совместимый с:

Windows
Mac
iOS
Android
Linux
Solaris
illumos

Google Chrome, разработчик —

Совместимый с:

Windows
Mac
iOS
Android
Linux

Opera, разработчик — Opera Software

Совместимый с:

Windows
Mac
iOS
Android
Linux

FontForge, разработчик — Open Source

Совместимый с:

Windows
Mac
Linux

Active learning: A web font example

With this in mind, let’s build up a basic web font example from first principles. It is difficult to demonstrate this using an embedded live example, so instead, we would like you to follow the steps detailed in the below sections, to get an idea of the process.

You should use the web-font-start.html and web-font-start.css files as a starting point to add your code to (see the live example). Make a copy of these files in a new directory on your computer now. In the file, you’ll find some minimal CSS to deal with the basic layout and typesetting of the example.

Finding fonts

For this example, we’ll use two web fonts, one for the headings, and one for the body text. To start with, we need to find the font files that contain the fonts. Fonts are created by font foundries and are stored in different file formats. There are generally three types of sites where you can obtain fonts:

  • A free font distributor: This is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). Examples include Font Squirrel, dafont, and Everything Fonts.
  • A paid font distributor: This is a site that makes fonts available for a charge, such as fonts.com or myfonts.com. You can also buy fonts directly from font foundries, for example Linotype, Monotype, or Exljbris.
  • An online font service: This is a site that stores and serves the fonts for you, making the whole process easier. See the section for more details.

Let’s find some fonts! Go to Font Squirrel and choose two fonts — a nice interesting font for the headings (maybe a nice display or slab serif font), and slightly less flashy and more readable font for the paragraphs. When you find each font, press on the download button, and save the file inside the same directory as the HTML and CSS files you saved earlier. It doesn’t matter whether they are TTF (True Type Fonts) or OTF (Open Type Fonts).

In each case, unzip the font package (Web fonts are usually distributed in ZIP files containing the font file(s) and licensing information). You may find multiple font files in the package — some fonts are distributed as a family with different variants available, for example thin, medium, bold, italic, thin italic, etc. For this example, we just want you to concern yourself with a single font file for each choice.

Note: Under the «Find fonts» section in the right-hand column, you can click on the different tags and classifications to filter the displayed choices.

Generating the required code

Now you’ll need to generate the required code (and font formats). For each font, follow these steps:

  1. Make sure you have satisfied any licensing requirement, if you are going to use this in a commercial and/or Web project.
  2. Go to the Fontsquirrel Webfont Generator.
  3. Upload your two font files using the Upload Fonts button.
  4. Check the checkbox labeled «Yes, the fonts I’m uploading are legally eligible for web embedding.»
  5. Click Download your kit.

After the generator has finished processing, you should get a ZIP file to download — save it in the same directory as your HTML and CSS.

Implementing the code in your demo

At this point, unzip the webfont kit you just generated. Inside the unzipped directory you’ll see three useful items:

  • Multiple versions of each font: (for example , , , etc.; the exact fonts provided will be updated over time as browser support requirements change). As mentioned above, multiple fonts are needed for cross browser support — this is Fontsquirrel’s way of making sure you’ve got everything you need.
  • A demo HTML file for each font — load these in your browser to see what the font will look like in different usage contexts.
  • A file, which contains the generated @font-face code you’ll need.

To implement these fonts in your demo, follow these steps:

  1. Rename the unzipped directory to something easy and simple, like .
  2. Open up the file and copy both the blocks contained inside into your file — you need to put them at the very top, before any of your CSS, as the fonts need to be imported before you can use them on your site.
  3. Each of the functions points to a font file that we want to import into our CSS — we need to make sure the paths to the files are correct, so add to the start of each path (adjust as necessary).
  4. Now you can use these fonts in your font stacks, just like any web safe or default system font. For example:
    font-family: 'zantrokeregular', serif;

You should end up with a demo page with some nice fonts implemented on them. Because different fonts are created at different sizes, you may have to adjust the size, spacing, etc., to sort out the look and feel.

Note: If you have any problems getting this to work, feel free to compare your version to our finished files — see web-font-finished.html and web-font-finished.css (run the finished example live).

Font families recap

As we looked at in Fundamental text and font styling, the fonts applied to your HTML can be controlled using the property. This takes one or more font family names, and the browser travels down the list until it finds a font it has available on the system it is running on:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

This system works well, but traditionally web developers’ font choices were limited. There are only a handful of fonts that you can guarantee to be available across all common systems — the so-called . You can use the font stack to specify preferable fonts, followed by web-safe alternatives, followed by the default system font, but this adds overhead in terms of testing to make sure that your designs look ok with each font, etc.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index


С этим читают